@gov-design-system-ce/components 0.0.58 → 0.0.60

package/dist/esm/gov-app.entry.js

@@ -3130,94 +3130,109 @@ if (customElements.get('accordion-page') === undefined) {
   customElements.define('accordion-page', AccordionPage);
 }
 
-class AlertPage extends HTMLElement {
+class InfobarPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-		<h2>Alert</h2>
+		<h2>Infobar</h2>
+		
+		<div class="gov-bg--secondary-800">
+			<gov-container>
+				<gov-infobar variant="secondary" headline="Tohle bude super nadpis pro všechno" closable>
+					<gov-icon name="info" slot="icon"></gov-icon>
+					<p>
+						Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
+					</p>
+				</gov-infobar>
+			</gov-container>
+		</div>
+		
+		<br/>
 
-		<gov-alert variant="secondary" headline="Tohle bude super nadpis pro všechno" closable>
+		<gov-infobar variant="secondary" headline="Tohle bude super nadpis pro všechno" closable>
 			<gov-icon name="info" slot="icon"></gov-icon>
 			<p>
 				Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
 			</p>
-		</gov-alert>
+		</gov-infobar>
+	
+		
 		<br>
-		<gov-alert variant="secondary" closable>
+		<gov-infobar variant="secondary" closable>
 			<gov-icon name="info" slot="icon"></gov-icon>
 			<p>
 				Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
 			</p>
-		</gov-alert>
+		</gov-infobar>
 		<br>
-		<gov-alert variant="warning" closable>
+		<gov-infobar variant="warning" closable>
 			<gov-icon name="info" slot="icon"></gov-icon>
 			<p>
 				Warning - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
 			</p>
-		</gov-alert>
+		</gov-infobar>
 		<br>
-		<gov-alert variant="error" closable>
+		<gov-infobar variant="error" closable>
 			<gov-icon name="info" slot="icon"></gov-icon>
 			<p>
 				Error - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
 			</p>
-		</gov-alert>
+		</gov-infobar>
 		<br>
-		<gov-alert variant="success" closable>
+		<gov-infobar variant="success" closable>
 			<gov-icon name="info" slot="icon"></gov-icon>
 			<p>
 				Error - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
 			</p>
-		</gov-alert>
+		</gov-infobar>
 		<br>
-		<gov-alert variant="primary" closable>
+		<gov-infobar variant="primary" closable>
 			<gov-icon name="info" slot="icon"></gov-icon>
 			<p>
 				Error - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
 			</p>
-		</gov-alert>
+		</gov-infobar>
 
 		<h3>Inverse</h3>
 		<br>
-		<gov-alert inverse="TRUE" variant="secondary" closable>
+		<gov-infobar inverse="TRUE" variant="secondary" closable>
 			<gov-icon name="info" slot="icon"></gov-icon>
 			<p>
 				Secondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
 			</p>
-		</gov-alert>
+		</gov-infobar>
 		<br>
-		<gov-alert inverse="True" variant="warning" closable>
+		<gov-infobar inverse="True" variant="warning" closable>
 			<gov-icon name="info" slot="icon"></gov-icon>
 			<p>
 				Warning - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
 			</p>
-		</gov-alert>
+		</gov-infobar>
 		<br>
-		<gov-alert inverse="1" variant="error" closable>
+		<gov-infobar inverse="1" variant="error" closable>
 			<gov-icon name="info" slot="icon"></gov-icon>
 			<p>
 				Error - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
 			</p>
-		</gov-alert>
+		</gov-infobar>
 		<br>
-		<gov-alert inverse="true" variant="success" closable>
+		<gov-infobar inverse="true" variant="success" closable>
 			<gov-icon name="info" slot="icon"></gov-icon>
 			<p>
 				Error - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
 			</p>
-		</gov-alert>
+		</gov-infobar>
 		<br>
-		<gov-alert inverse="true" variant="primary" closable>
+		<gov-infobar inverse="true" variant="primary" closable>
 			<gov-icon name="info" slot="icon"></gov-icon>
 			<p>
 				Error - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.
 			</p>
-		</gov-alert>
+		</gov-infobar>
 		`;
   }
 }
-if (customElements.get('alert-page') === undefined) {
-  customElements.define('alert-page', AlertPage);
+if (customElements.get('infobar-page') === undefined) {
+  customElements.define('infobar-page', InfobarPage);
 }
 
 class BadgePage extends HTMLElement {
@@ -4996,15 +5011,17 @@ class CardPage extends HTMLElement {
 
 			<div style="height: 400px">
 				<gov-card label="Fusce tellus odio, dapibus id fermentum quis" expanded collapsible>
-					<p class="gov-color--secondary-700">
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
-					</p>
-					<gov-button variant="primary" size="s" href="http://localhost:3333/button">
-						Button
-					</gov-button>
-					<p slot="footer" class="gov-color--primary-700">
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
-					</p>
+					<div class="gov-content">
+						<p class="gov-color--secondary-700">
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
+						</p>
+						<gov-button variant="primary" size="s" href="http://localhost:3333/button">
+							Button
+						</gov-button>
+						<p slot="footer" class="gov-color--primary-700">
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.
+						</p>
+					</div>
 				</gov-card>
 			</div>
 			<br>
@@ -5562,6 +5579,13 @@ class FormsPage extends HTMLElement {
 				<gov-icon slot="right-icon" name="info"></gov-icon>
 			</gov-form-input>
 			<br>
+			<gov-form-select size="l" name="test-me" invalid="true">
+				<option value="" selected>Placeholder</option>
+				<option value="b">Value B</option>
+				<option value="c">Value C</option>
+				<option value="d">Value D</option>
+			</gov-form-select>
+			<br>
 			<gov-form-select size="l" name="test-me" success="true">
 				<option value="" selected>Placeholder</option>
 				<option value="b">Value B</option>
@@ -5593,6 +5617,18 @@ class FormsPage extends HTMLElement {
 				<option value="i" selected>Value I</option>
 			</gov-form-multi-select>
 			<br>
+			<gov-form-multi-select size="xl" id="ba" placeholder="Placeholder" wcag-described-by="me-and-you" success="true">
+				<option value>Placeholder</option>
+				<option value="b">Value B</option>
+				<option value="c">Value C</option>
+				<option value="d" selected>Value D</option>
+				<option value="e">Value E</option>
+				<option value="f">Value F</option>
+				<option value="g">Value G</option>
+				<option value="h">Value H</option>
+				<option value="i" selected>Value I</option>
+			</gov-form-multi-select>
+			<br>
 			<gov-form-checkbox name="test-me-c" value="me" checked no-label></gov-form-checkbox>
 			<gov-form-radio name="superRadio2" value="me1" no-label></gov-form-radio>
 			<br>
@@ -5839,6 +5875,14 @@ class FormsPage extends HTMLElement {
 					Required
 				</gov-form-message>
 			</gov-form-control>
+			<gov-form-control success="true">
+				<gov-form-label slot="top">Label of autocomplete</gov-form-label>
+				<gov-form-group>
+					<gov-form-autocomplete placeholder="Placeholder autcomplete" id="bagr" success="true">
+						<gov-icon name="search" slot="right-icon" />
+					</gov-form-autocomplete>
+				</gov-form-group>
+			</gov-form-control>
 			<gov-form-control>
 				<gov-form-label slot="top">Label of autocomplete</gov-form-label>
 				<gov-form-group>
@@ -6323,6 +6367,54 @@ class FormsPage extends HTMLElement {
 				</gov-form-group>
 			</gov-form-control>
 
+			<h3>
+				Success
+			</h3>
+			<gov-form-control success="true">
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="s" success="true">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control success="true">
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="m" success="true">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control success="true">
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="l" success="true">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control success="true">
+				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me" size="xl" success="true">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+
 			<h3>
 				Invalid
 			</h3>
@@ -7034,7 +7126,49 @@ if (customElements.get('grid-page') === undefined) {
 
 class HomePage extends HTMLElement {
   connectedCallback() {
-    this.innerHTML = ``;
+    this.innerHTML = `
+		<form style="padding: 20px;">
+			<gov-form-label legend>
+				Form Label legend
+			</gov-form-label>
+			<gov-form-control type="input">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" name="test-me" placeholder="Placeholder" variant="primary" size="s"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<br><br>
+			<legend>Legend</legend>
+			<gov-form-control type="input">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" name="test-me" placeholder="Placeholder" variant="primary" size="s"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<br><br>
+			<gov-form-control type="input" fieldset>
+				<gov-form-label size="s" slot="top">Form control fieldset</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" name="test-me" placeholder="Placeholder" variant="primary" size="s"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<br><br>
+			<fieldset>
+				<gov-form-label size="s" slot="top">Fieldset</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" name="test-me" placeholder="Placeholder" variant="primary" size="s"></gov-form-input>
+				</gov-form-group>
+			</fieldset>
+			<br><br>
+			<fieldset>
+				<legend>Fieldset & Legend</legend>
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" name="test-me" placeholder="Placeholder" variant="primary" size="s"></gov-form-input>
+				</gov-form-group>
+			</fieldset>
+		</form>
+		`;
   }
 }
 if (customElements.get('home-page') === undefined) {
@@ -7850,6 +7984,7 @@ class StepperPage extends HTMLElement {
 			<h2>Stepper</h2>
 
 			<h3>Velikost M</h3>
+			<gov-spacer size="l"></gov-spacer>
 
 			<gov-stepper>
 				<gov-stepper-item trigger-tag="h1" label="Hotový krok" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
@@ -7877,6 +8012,7 @@ class StepperPage extends HTMLElement {
 
 			<br><br>
 			<h3>Velikost S</h3>
+			<gov-spacer size="l"></gov-spacer>
 
 			<gov-stepper size="s">
 				<gov-stepper-item trigger-tag="h1" label="Hotový krok" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
@@ -7901,6 +8037,7 @@ class StepperPage extends HTMLElement {
 
 			<br><br>
 			<h3>Velikost XS</h3>
+			<gov-spacer size="l"></gov-spacer>
 
 			<gov-stepper size="xs">
 				<gov-stepper-item trigger-tag="h1" label="Hotový krok" variant="success" annotation="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus">
@@ -8807,7 +8944,7 @@ const GovApp = class {
     const router = new Router(outlet);
     router.setRoutes([
       { path: '/', component: 'home-page' },
-      { path: '/alert', component: 'alert-page' },
+      { path: '/infobar', component: 'infobar-page' },
       { path: '/accordion', component: 'accordion-page' },
       { path: '/badge', component: 'badge-page' },
       { path: '/button', component: 'button-page' },