chore: split large demo files to individual files

patternfly · ArathyKumar · Sep 25, 2023 · Sep 27, 2023 · Nov 9, 2023 · Mar 27, 2024
commit 19e0e1192dd1141ccf5665329ea197f854155aed
diff --git a/elements/pf-date-picker/demo/date-format.html b/elements/pf-date-picker/demo/date-format.html
@@ -0,0 +1,44 @@
+<div class="container">
+  <section>
+    <h2>Date Format</h2>
+    <pre><code>&lt;pf-date-picker dateFormatInput="YYYY-DD-MM"&gt;&lt;/pf-date-picker&gt;</code></pre>
+    <pf-date-picker dateFormatInput="YYYY-DD-MM"></pf-date-picker>
+    <p>The date picker supports the following 12 date formats:</p>
+    <p><span>'DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD', 'YYYY/DD/MM', 'DD-MM-YYYY', 'MM-DD-YYYY', 'YYYY-MM-DD',
+       'YYYY-DD-MM', 'DD.MM.YYYY', 'MM.DD.YYYY', 'YYYY.MM.DD', 'YYYY.DD.MM'</span></p>
+    <p>The date format is set globally, independent of the user's locale. 
+      This means that all users will see the same date format, regardless of their language or region.</p>
+  </section>
+</div>
+
+
+<script type="module">
+  import '@patternfly/elements/pf-date-picker/pf-date-picker.js';
+</script>
+
+<style>
+  .container {
+    min-height: 25vh;
+    height: auto;
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 40px;
+    flex-direction: column;
+  }
+
+  .container section {
+    margin-bottom: var(--rh-space-lg, 16px)
+  }
+
+  .container section p span {
+    color: var(--rh-color-text-secondary-on-light, #4d4d4d);
+    font-family: var(--rh-font-family-code, RedHatMono, "Red Hat Mono", "Courier New", Courier, monospace);
+  }
+
+  .container section pre {
+    padding-bottom: var(--rh-space-md, 8px)
+  }
+</style>
+
diff --git a/elements/pf-date-picker/demo/date-input.html b/elements/pf-date-picker/demo/date-input.html
@@ -0,0 +1,43 @@
+<div class="container">
+  <section>
+    <h2>Set Input Date</h2>
+    <pre><code>&lt;pf-date-picker inputDate=${new Date(2023, 0, 1)}&gt;&lt;/pf-date-picker&gt;</code></pre>
+    <!-- ***** The value for inputDate must be passed as **DATE TYPE** from parent component (Here the value is passed as string type 
+      for demo purpose, as there are some restrictions for adding Date type value in .html file). -->
+    <pf-date-picker inputDate="Sun Jan 01 2023 05:30:00 GMT+0530 (India Standard Time)"></pf-date-picker>
+    <p>The default date value can be passed to the date picker to set the initial date that is displayed.</p>
+    <p>In the above given example, the date set to be displayed initially is <span>January 1, 2023</span>.</p>
+  </section>
+</div>
+
+
+<script type="module">
+  import '@patternfly/elements/pf-date-picker/pf-date-picker.js';
+</script>
+
+<style>
+  .container {
+    min-height: 25vh;
+    height: auto;
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 40px;
+    flex-direction: column;
+  }
+
+  .container section {
+    margin-bottom: var(--rh-space-lg, 16px)
+  }
+
+  .container section p span {
+    color: var(--rh-color-text-secondary-on-light, #4d4d4d);
+    font-family: var(--rh-font-family-code, RedHatMono, "Red Hat Mono", "Courier New", Courier, monospace);
+  }
+
+  .container section pre {
+    padding-bottom: var(--rh-space-md, 8px)
+  }
+</style>
+
diff --git a/elements/pf-date-picker/demo/disabled.html b/elements/pf-date-picker/demo/disabled.html
@@ -0,0 +1,40 @@
+<div class="container">
+  <section>
+    <h2>Disabled</h2>
+    <pre><code>&lt;pf-date-picker isDisabled="true"&gt;&lt;/pf-date-picker&gt;</code></pre>
+    <pf-date-picker isDisabled="true"></pf-date-picker>
+    <p>The <span>isDisabled</span> attribute can be used to disable the date picker.</p>
+  </section>
+</div>
+
+
+<script type="module">
+  import '@patternfly/elements/pf-date-picker/pf-date-picker.js';
+</script>
+
+<style>
+  .container {
+    min-height: 25vh;
+    height: auto;
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 40px;
+    flex-direction: column;
+  }
+
+  .container section {
+    margin-bottom: var(--rh-space-lg, 16px)
+  }
+
+  .container section p span {
+    color: var(--rh-color-text-secondary-on-light, #4d4d4d);
+    font-family: var(--rh-font-family-code, RedHatMono, "Red Hat Mono", "Courier New", Courier, monospace);
+  }
+
+  .container section pre {
+    padding-bottom: var(--rh-space-md, 8px)
+  }
+</style>
+
diff --git a/elements/pf-date-picker/demo/localization.html b/elements/pf-date-picker/demo/localization.html
@@ -0,0 +1,43 @@
+<div class="container">
+  <section>
+    <h2>Localization</h2>
+    <pre><code>&lt;pf-date-picker localizationLanguageCode="fi"&gt;&lt;/pf-date-picker&gt;</code></pre>
+    <pf-date-picker localizationLanguageCode="fi"></pf-date-picker>
+    <p>The locale string can be passed to the date picker to set the date format.</p>
+    <p>In the above given example, the locale is set to <span>Finnish: fi</span></p>
+    <p>The date format is set globally, independent of the user's locale. 
+      This means that all users will see the same date format, regardless of their language or region.</p>
+  </section>
+</div>
+
+
+<script type="module">
+  import '@patternfly/elements/pf-date-picker/pf-date-picker.js';
+</script>
+
+<style>
+  .container {
+    min-height: 25vh;
+    height: auto;
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 40px;
+    flex-direction: column;
+  }
+
+  .container section {
+    margin-bottom: var(--rh-space-lg, 16px)
+  }
+
+  .container section p span {
+    color: var(--rh-color-text-secondary-on-light, #4d4d4d);
+    font-family: var(--rh-font-family-code, RedHatMono, "Red Hat Mono", "Courier New", Courier, monospace);
+  }
+
+  .container section pre {
+    padding-bottom: var(--rh-space-md, 8px)
+  }
+</style>
+
diff --git a/elements/pf-date-picker/demo/min-and-max-date.html b/elements/pf-date-picker/demo/min-and-max-date.html
@@ -0,0 +1,49 @@
+<div class="container">
+  <section>
+    <h2>Set minimum and maximum date range</h2>
+    <pre><code>&lt;pf-date-picker minDate=${new Date(2023, 0, 2)} minDate=${new Date(2023, 0, 20)} 
+      inputDate=${new Date(2023, 0, 3)}&gt;&lt;/pf-date-picker&gt;</code></pre>
+    <!-- ***** The values for minDate and maxDate must be passed as **DATE TYPE** from parent component (Here the values are passed as string type 
+      for demo purpose, as there are some restrictions for adding Date type value in .html file). -->
+    <pf-date-picker 
+      inputDate="Tue Jan 03 2023 05:30:00 GMT+0530 (India Standard Time)"
+      minDate="Mon Jan 02 2023 00:00:00 GMT+0530 (India Standard Time)"
+      maxDate="Fri Jan 20 2023 00:00:00 GMT+0530 (India Standard Time)">
+    </pf-date-picker>
+    <p>The minimum and maximum valid dates can be passed to the date picker to restrict the range of dates that can be selected</p>
+    <p>In the above given example, the minimum valid date 
+      is <span>January 2, 2023</span>, and the maximum valid date is <span>January 20, 2023</span></p>
+  </section>
+</div>
+
+
+<script type="module">
+  import '@patternfly/elements/pf-date-picker/pf-date-picker.js';
+</script>
+
+<style>
+  .container {
+    min-height: 25vh;
+    height: auto;
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 40px;
+    flex-direction: column;
+  }
+
+  .container section {
+    margin-bottom: var(--rh-space-lg, 16px)
+  }
+
+  .container section p span {
+    color: var(--rh-color-text-secondary-on-light, #4d4d4d);
+    font-family: var(--rh-font-family-code, RedHatMono, "Red Hat Mono", "Courier New", Courier, monospace);
+  }
+
+  .container section pre {
+    padding-bottom: var(--rh-space-md, 8px)
+  }
+</style>
+
diff --git a/elements/pf-date-picker/demo/pf-date-picker.html b/elements/pf-date-picker/demo/pf-date-picker.html
@@ -6,68 +6,6 @@ <h2>Basic</h2>
     <p>The basic date picker will use the user's locale to determine the date format. The default minimum valid date 
       is <span>January 1, 1900</span>, and the default maximum valid date is <span>December 31, 9999</span>.</p>
   </section>
-
-  <section>
-    <h2>Date Format</h2>
-    <pre><code>&lt;pf-date-picker dateFormatInput="YYYY-DD-MM"&gt;&lt;/pf-date-picker&gt;</code></pre>
-    <pf-date-picker dateFormatInput="YYYY-DD-MM"></pf-date-picker>
-    <p>The date picker supports the following 12 date formats:</p>
-    <p><span>'DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD', 'YYYY/DD/MM', 'DD-MM-YYYY', 'MM-DD-YYYY', 'YYYY-MM-DD',
-       'YYYY-DD-MM', 'DD.MM.YYYY', 'MM.DD.YYYY', 'YYYY.MM.DD', 'YYYY.DD.MM'</span></p>
-    <p>The date format is set globally, independent of the user's locale. 
-      This means that all users will see the same date format, regardless of their language or region.</p>
-  </section>
-
-  <section>
-    <h2>Localization</h2>
-    <pre><code>&lt;pf-date-picker localizationLanguageCode="fi"&gt;&lt;/pf-date-picker&gt;</code></pre>
-    <pf-date-picker localizationLanguageCode="fi"></pf-date-picker>
-    <p>The locale string can be passed to the date picker to set the date format.</p>
-    <p>In the above given example, the locale is set to <span>Finnish: fi</span></p>
-    <p>The date format is set globally, independent of the user's locale. 
-      This means that all users will see the same date format, regardless of their language or region.</p>
-  </section>
-
-  <section>
-    <h2>Translation</h2>
-    <pre><code>&lt;pf-date-picker translationLanguageCode="fr"&gt;&lt;/pf-date-picker&gt;</code></pre>
-    <pf-date-picker translationLanguageCode="fr"></pf-date-picker>
-    <p>The translation language string can be passed to the date picker to localize the month names.</p>
-    <p>In the above given example, the language is set to <span>French: fr</span></p>
-  </section>
-
-  <section>
-    <h2>Set Date</h2>
-    <pre><code>&lt;pf-date-picker inputDate=${new Date(2023, 0, 1)}&gt;&lt;/pf-date-picker&gt;</code></pre>
-    <!-- ***** The value for inputDate must be passed as **DATE TYPE** from parent component (Here the value is passed as string type 
-      for demo purpose, as there are some restrictions for adding Date type value in .html file). -->
-    <pf-date-picker inputDate="Sun Jan 01 2023 05:30:00 GMT+0530 (India Standard Time)"></pf-date-picker>
-    <p>The default date value can be passed to the date picker to set the initial date that is displayed.</p>
-    <p>In the above given example, the date set to be displayed initially is <span>January 1, 2023</span>.</p>
-  </section>
-
-  <section>
-    <h2>Set Min and Max Date</h2>
-    <pre><code>&lt;pf-date-picker minDate=${new Date(2023, 0, 2)} minDate=${new Date(2023, 0, 20)} 
-      inputDate=${new Date(2023, 0, 3)}&gt;&lt;/pf-date-picker&gt;</code></pre>
-    <!-- ***** The values for minDate and maxDate must be passed as **DATE TYPE** from parent component (Here the values are passed as string type 
-      for demo purpose, as there are some restrictions for adding Date type value in .html file). -->
-    <pf-date-picker 
-      inputDate="Tue Jan 03 2023 05:30:00 GMT+0530 (India Standard Time)"
-      minDate="Mon Jan 02 2023 00:00:00 GMT+0530 (India Standard Time)"
-      maxDate="Fri Jan 20 2023 00:00:00 GMT+0530 (India Standard Time)">
-    </pf-date-picker>
-    <p>The minimum and maximum valid dates can be passed to the date picker to restrict the range of dates that can be selected</p>
-    <p>In the above given example, the minimum valid date 
-      is <span>January 2, 2023</span>, and the maximum valid date is <span>January 20, 2023</span></p>
-  </section>
-
-  <section>
-    <h2>Disabled</h2>
-    <pre><code>&lt;pf-date-picker isDisabled="true"&gt;&lt;/pf-date-picker&gt;</code></pre>
-    <pf-date-picker isDisabled="true"></pf-date-picker>
-    <p>The <span>isDisabled</span> attribute can be used to disable the date picker.</p>
-  </section>
 </div>
 
 

diff --git a/elements/pf-date-picker/demo/translation.html b/elements/pf-date-picker/demo/translation.html
@@ -0,0 +1,41 @@
+<div class="container">
+  <section>
+    <h2>Translation</h2>
+    <pre><code>&lt;pf-date-picker translationLanguageCode="fr"&gt;&lt;/pf-date-picker&gt;</code></pre>
+    <pf-date-picker translationLanguageCode="fr"></pf-date-picker>
+    <p>The translation language string can be passed to the date picker to localize the month names.</p>
+    <p>In the above given example, the language is set to <span>French: fr</span></p>
+  </section>
+</div>
+
+
+<script type="module">
+  import '@patternfly/elements/pf-date-picker/pf-date-picker.js';
+</script>
+
+<style>
+  .container {
+    min-height: 25vh;
+    height: auto;
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 40px;
+    flex-direction: column;
+  }
+
+  .container section {
+    margin-bottom: var(--rh-space-lg, 16px)
+  }
+
+  .container section p span {
+    color: var(--rh-color-text-secondary-on-light, #4d4d4d);
+    font-family: var(--rh-font-family-code, RedHatMono, "Red Hat Mono", "Courier New", Courier, monospace);
+  }
+
+  .container section pre {
+    padding-bottom: var(--rh-space-md, 8px)
+  }
+</style>
+