Merge pull request #304 from legumeinfo/optional-examples

Optional examples for web components
legumeinfo · Dec 22, 2023 · c619339 · c619339
2 parents 28784a4 + bc8f514
commit c619339
Show file tree

Hide file tree

Showing 71 changed files with 6,012 additions and 4,688 deletions.
diff --git a/dev/examples/lis-gene-search-with-linkouts.html b/dev/examples/lis-gene-search-with-linkouts.html
@@ -19,7 +19,7 @@
 
  <body>
 
- <div class="uk-container">
+ <div class="uk-container uk-margin-bottom">
  <h1>&lt;lis-gene-search-element&gt; with &lt;lis-linkout-element&gt; and &lt;lis-modal-element&gt;</h1>
  <p>
  The <code>&lt;lis-gene-search-element&gt;</code> provides a form for performing gene searches and displays the results in a paginated table.

diff --git a/dev/lis-gene-search-element.html b/dev/lis-gene-search-element.html
@@ -19,7 +19,7 @@
 
  <body>
 
- <div class="uk-container">
+ <div class="uk-container uk-margin-bottom">
  <h1>&lt;lis-gene-search-element&gt;</h1>
  <p>
  The <code>&lt;lis-gene-search-element&gt;</code> provides a form for performing gene searches and displays the results in a paginated view.
@@ -37,11 +37,15 @@ <h1>&lt;lis-gene-search-element&gt;</h1>
  Similarly, all searches can be limited to a specific species by setting the <code>species</code> attribute/property in conjunction with the <code>genus</code> attribute/property.
  You can try setting the <code>genus</code> and <code>species</code> properties in this example using the <code>geneSearchElement</code> variable in the Web console.
  </p>
+ <p>
+ Example text for the Identifier, Description, and Gene Family ID form fields can be provided by setting the <code>identifierExample</code>, <code>descriptionExample</code>, and <code>familyExample</code> attributes/properties, respectively.
+ </p>
  <hr>
+ </div>
 
+ <div class="uk-container uk-container-expand">
  <!-- the custom gene search element -->
- <lis-gene-search-element id="gene-search"></lis-gene-search-element>
-
+ <lis-gene-search-element id="gene-search" identifierExample="Glyma.13G357700" descriptionExample="protein disulfide isomerase-like protein" familyExample="L_HZ6G4Z"></lis-gene-search-element>
  </div>
 
  <!-- set the search function by property because functions can't be set as attributes -->

diff --git a/dev/lis-publication-search-element.html b/dev/lis-publication-search-element.html
@@ -19,7 +19,7 @@
 
  <body>
 
- <div class="uk-container">
+ <div class="uk-container uk-margin-bottom">
  <h1>&lt;lis-publication-search-element&gt;</h1>
  <p>
  The <code>&lt;lis-publication-search-element&gt;</code> provides a form for performing publication searches and displays the results in a paginated table.
@@ -30,12 +30,15 @@ <h1>&lt;lis-publication-search-element&gt;</h1>
  This allows users to share specific pages from a search via the URL and for the search history to be navigated via the Web browser's forward and back buttons.
  If the query string parameters are present when the component loads then a search will be automatically performed with the query string parameter values.
  </p>
+ <p>
+ Example text for the search field can be provided by setting the <code>titleExample</code> attribute/property.
+ </p>
  <hr>
  </div>
 
  <div class="uk-container uk-container-expand">
  <!-- the custom publication search element -->
- <lis-publication-search-element id="publication-search"></lis-publication-search-element>
+ <lis-publication-search-element id="publication-search" titleExample="expression"></lis-publication-search-element>
  </div>
 
  <!-- set the search function by property because functions can't be set as attributes -->

diff --git a/dev/lis-qtl-search-element.html b/dev/lis-qtl-search-element.html
@@ -19,7 +19,7 @@
 
  <body>
 
- <div class="uk-container">
+ <div class="uk-container uk-margin-bottom">
  <h1>&lt;lis-qtl-search-element&gt;</h1>
  <p>
  The <code>&lt;lis-qtl-search-element&gt;</code> provides a form for performing qtl searches and displays the results in a paginated table.
@@ -30,12 +30,15 @@ <h1>&lt;lis-qtl-search-element&gt;</h1>
  This allows users to share specific pages from a search via the URL and for the search history to be navigated via the Web browser's forward and back buttons.
  If the query string parameters are present when the component loads then a search will be automatically performed with the query string parameter values.
  </p>
+ <p>
+ Example text for the search field can be provided by setting the <code>traitExample</code> attribute/property.
+ </p>
  <hr>
  </div>
 
  <div class="uk-container uk-container-expand">
  <!-- the custom qtl search element -->
- <lis-qtl-search-element id="qtl-search"></lis-qtl-search-element>
+ <lis-qtl-search-element id="qtl-search" traitExample="flower"></lis-qtl-search-element>
  </div>
 
  <!-- set the search function by property because functions can't be set as attributes -->

diff --git a/dev/lis-trait-association-search-element.html b/dev/lis-trait-association-search-element.html
@@ -19,7 +19,7 @@
 
  <body>
 
- <div class="uk-container">
+ <div class="uk-container uk-margin-bottom">
  <h1>&lt;lis-trait-association-search-element&gt;</h1>
  <p>
  The <code>&lt;lis-trait-association-search-element&gt;</code> provides a form for performing trait association searches of GWAS/QTL studies and displays the results in a paginated view.
@@ -37,12 +37,16 @@ <h1>&lt;lis-trait-association-search-element&gt;</h1>
  Similarly, all searches can be limited to a specific species by setting the <code>species</code> attribute/property in conjunction with the <code>genus</code> attribute/property.
  You can try setting the <code>genus</code> and <code>species</code> properties in this example using the <code>traitAssociationSearchElement</code> variable in the Web console.
  </p>
+ <p>
+ Example text for the Traits, Publication ID, and Author fields can be provided by setting the <code>traitsExample</code>, <code>publicationExample</code>, and <code>authorExample</code> attributes/properties, respectively.
+ </p>
 
  <hr>
+ </div>
 
+ <div class="uk-container uk-container-expand">
  <!-- the custom trait association search element -->
- <lis-trait-association-search-element id="trait-association-search"></lis-trait-association-search-element>
-
+ <lis-trait-association-search-element id="trait-association-search" traitsExample="R8 full maturity" publicationExample="10.2135/cropsci2005.05-0168" authorExample="Blair"></lis-trait-association-search-element>
  </div>
 
  <!-- set the search function by property because functions can't be set as attributes -->

diff --git a/dev/lis-trait-search-element.html b/dev/lis-trait-search-element.html
@@ -19,7 +19,7 @@
 
  <body>
 
- <div class="uk-container">
+ <div class="uk-container uk-margin-bottom">
  <h1>&lt;lis-trait-search-element&gt;</h1>
  <p>
  The <code>&lt;lis-trait-search-element&gt;</code> provides a form for performing trait searches and displays the results in a paginated table.
@@ -30,12 +30,14 @@ <h1>&lt;lis-trait-search-element&gt;</h1>
  This allows users to share specific pages from a search via the URL and for the search history to be navigated via the Web browser's forward and back buttons.
  If the query string parameters are present when the component loads then a search will be automatically performed with the query string parameter values.
  </p>
+ <p>
+ Example text for the search field can be provided by setting the <code>traitExample</code> attribute/property.
  <hr>
  </div>
 
  <div class="uk-container uk-container-expand">
  <!-- the custom trait search element -->
- <lis-trait-search-element id="trait-search"></lis-trait-search-element>
+ <lis-trait-search-element id="trait-search" traitExample="flower"></lis-trait-search-element>
  </div>
 
  <!-- set the search function by property because functions can't be set as attributes -->

diff --git a/docs/assets/navigation.js b/docs/assets/navigation.js