Update configOption component

Author: Ndpnt

themes/opentermsarchive/assets/css/components/configOption/configOption.css

@@ -13,20 +13,31 @@
 .config-option-type {
   color: var(--colorBlack600);
   padding-left: 1rem;
+  text-transform: lowercase;
+}
+
+.config-option-required {
+  padding-left: 1rem;
+  text-transform: lowercase;
+  color: rgb(154, 103, 0);
 }
 
 .config-option-description,
 .config-option-default,
-.config-option-example {
+.config-option-example,
+.config-option-allowed-values {
   padding: 1rem 0.4em;
 }
 
 .config-option-example code,
-.config-option-default code {
+.config-option-default code,
+.config-option-allowed-values code {
   margin-left: 0.4em;
+  display: inline-block;
 }
 
 .config-option-example,
-.config-option-default {
-  font-size: 0.9em;
+.config-option-default,
+.config-option-allowed-values {
+  font-size: 0.85em;
 }

themes/opentermsarchive/layouts/shortcodes/configOption.html

@@ -1,10 +1,19 @@
 <div class="config-option">
-    <div class="config-option-name"><code>{{ .Get "name" }}</code><span class="config-option-type">{{ .Get "type" }}</span></div>
+    <div class="config-option-name">
+        <code>{{ .Get "name" }}</code>
+        <span class="config-option-type">{{ .Get "type" }}</span>
+        {{ if .Get "required" }}
+        <span class="config-option-required">Required</span>
+        {{ end }}
+    </div>
     <div class="config-option-description">{{ .Get "description" | markdownify }}</div>
     {{ if .Get "default" }}
     <div class="config-option-default"><span>Default:</span><code>{{ .Get "default" }}</code></div>
     {{ end }}
     {{ if .Get "example" }}
-    <div class="config-option-example"><span>Example:</span><code>{{ .Get "example" }}</code></div>
+    <div class="config-option-example"><span>Example:</span><code>{{ .Get "example" | markdownify }}</code></div>
+    {{ end }}
+    {{ if .Get "allowedValues" }}
+    <div class="config-option-allowed-values"><span>Allowed values:</span><code>{{ .Get "allowedValues" }}</code></div>
     {{ end }}
 </div>