@gov-design-system-ce/components 0.0.37 → 0.0.38

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

@@ -3263,7 +3263,7 @@ class AlertPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
 		<h2>Alert</h2>
-		
+
 		<gov-alert variant="secondary" headline="Tohle bude super nadpis pro všechno" closable>
 			<gov-icon name="info" slot="icon"></gov-icon>
 			<p>
@@ -3764,48 +3764,72 @@ class ButtonPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
 			<h1>Buttons</h1>
+
+			<h4>Dropdown</h4>
+
+			<gov-layout>
+				<gov-layout-column>
+					<div class="container-view">
+						<gov-dropdown>
+							<gov-button variant="primary" size="s">
+								Více
+							</gov-button>
+							<ul slot="list">
+								<li>
+									<gov-button variant="primary" type="base" size="s">
+										A další nabídka
+										<gov-icon slot="right-icon" name="info"></gov-icon>
+									</gov-button>
+								</li>
+								<li>
+									<gov-button variant="primary" type="base" size="s">
+										A další dlouhá nabídka
+										<gov-icon slot="right-icon" name="info"></gov-icon>
+									</gov-button>
+								</li>
+								<li>
+									<gov-button variant="primary" type="base" size="s">
+										A další
+										<gov-icon slot="right-icon" name="info"></gov-icon>
+									</gov-button>
+								</li>
+							</ul>
+						</gov-dropdown>
+					</div>
+				</gov-layout-column>
+				<gov-layout-column>
+					<div class="container-view">
+						<gov-dropdown position="right">
+							<gov-button variant="primary" size="s">
+								Více
+							</gov-button>
+							<ul slot="list">
+								<li>
+									<gov-button variant="secondary" type="base" size="s">
+										A další nabídka
+										<gov-icon slot="right-icon" name="info"></gov-icon>
+									</gov-button>
+								</li>
+								<li>
+									<gov-button variant="secondary" type="base" size="s">
+										A další dlouhá nabídka
+										<gov-icon slot="right-icon" name="info"></gov-icon>
+									</gov-button>
+								</li>
+								<li>
+									<gov-button variant="secondary" type="base" size="s">
+										A další
+										<gov-icon slot="right-icon" name="info"></gov-icon>
+									</gov-button>
+								</li>
+							</ul>
+						</gov-dropdown>
+					</div>
+				</gov-layout-column>
+			</gov-layout>
+
 			<h4>Buttons - primary (default)</h4>
-			
-			
-			<gov-button-test type="solid" variant="primary" size="s" href="http://localhost:3333/button">
-				Small Primary
-				<gov-icon slot="left-icon" name="info"></gov-icon>
-			</gov-button-test>
-			
-			<gov-form-input size="m" placeholder="Co hledáte" input-type="datetime-local"></gov-form-input>
-			
-			
-			
-			<br/>
-			<br/>
-			<br/>
-			<br/>
-			<br/>
-			<hr/>
-			<br/>
-			<br/>
-			<br/>
-			<br/>
-			
-			<gov-control-group>
-				<gov-button variant="primary" size="s" href="http://localhost:3333/button">
-				Small Primary
-				</gov-button>
-				<gov-button variant="primary" size="s" href="http://localhost:3333/button">
-				Small Primary
-				</gov-button>
-				<gov-form-input multiline rows="3" name="test-me" disabled value="Value of textarea"></gov-form-input>
-				<gov-form-select size="l" name="test-me">
-					<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-button variant="primary" size="s" href="http://localhost:3333/button">
-				Small Primary
-				</gov-button>
-			</gov-control-group>
-			
+
 			<div class="container-view">
 				<gov-button variant="primary" size="s" href="http://localhost:3333/button">
 					<gov-icon slot="left-icon" name="info"></gov-icon>
@@ -5200,7 +5224,7 @@ class ControlGroupPage extends HTMLElement {
     this.innerHTML = `
 		<h2>Control Group</h2>
 
-		<gov-control-group bordered>
+		<gov-control-group>
 			<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="s"></gov-form-input>
 			<gov-button variant="primary" type="outlined" size="s">
 				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
@@ -5211,9 +5235,31 @@ class ControlGroupPage extends HTMLElement {
 			<gov-button variant="primary" type="outlined" size="s">
 				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 			</gov-button>
+			<gov-dropdown position="right">
+				<gov-button variant="primary" size="s">
+					Více
+				</gov-button>
+				<ul slot="list">
+					<li>
+						<gov-button variant="primary" type="base" size="s">
+							A další nabídka
+						</gov-button>
+					</li>
+					<li>
+						<gov-button variant="primary" type="base" size="s">
+							A další nabídka
+						</gov-button>
+					</li>
+					<li>
+						<gov-button variant="primary" type="base" size="s">
+							A další nabídka
+						</gov-button>
+					</li>
+				</ul>
+			</gov-dropdown>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="primary" bordered>
+		<gov-control-group variant="primary">
 			<gov-form-select name="test-me" size="m">
 				<option value="" selected>Placeholder</option>
 				<option value="b">Value B</option>
@@ -5225,7 +5271,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group bordered>
+		<gov-control-group>
 			<gov-button variant="primary" type="outlined" size="l">
 				<gov-icon slot="left-icon" name="gear"></gov-icon>
 			</gov-button>
@@ -5239,7 +5285,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="primary" bordered>
+		<gov-control-group variant="primary" no-border>
 		<gov-button variant="primary" type="outlined" size="xl">
 				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
 			</gov-button>
@@ -5258,7 +5304,7 @@ class ControlGroupPage extends HTMLElement {
 		</gov-control-group>
 		<br><br>
 
-		<gov-control-group variant="secondary" bordered>
+		<gov-control-group variant="secondary" no-border>
 			<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="primary" size="s"></gov-form-input>
 			<gov-button variant="primary" type="outlined" size="s">
 				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
@@ -5283,7 +5329,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="secondary" bordered>
+		<gov-control-group variant="secondary">
 			<gov-button variant="primary" type="outlined" size="l">
 				<gov-icon slot="left-icon" name="gear"></gov-icon>
 			</gov-button>
@@ -5297,7 +5343,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="secondary" bordered>
+		<gov-control-group variant="secondary">
 		<gov-button variant="primary" type="outlined" size="xl">
 				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
 			</gov-button>
@@ -5316,7 +5362,7 @@ class ControlGroupPage extends HTMLElement {
 		</gov-control-group>
 		<br><br>
 
-		<gov-control-group variant="secondary" bordered>
+		<gov-control-group variant="secondary">
 			<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" variant="secondary" size="s"></gov-form-input>
 			<gov-button variant="secondary" type="outlined" size="s">
 				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
@@ -5329,7 +5375,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="secondary">
+		<gov-control-group variant="secondary" no-border>
 			<gov-form-select name="test-me" size="m">
 				<option value="" selected>Placeholder</option>
 				<option value="b">Value B</option>
@@ -5341,7 +5387,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="secondary" bordered>
+		<gov-control-group variant="secondary">
 			<gov-button variant="secondary" type="outlined" size="l">
 				<gov-icon slot="left-icon" name="gear"></gov-icon>
 			</gov-button>
@@ -5355,7 +5401,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group variant="secondary" bordered>
+		<gov-control-group variant="secondary">
 		<gov-button variant="secondary" type="outlined" size="xl">
 				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
 			</gov-button>
@@ -5372,146 +5418,6 @@ class ControlGroupPage extends HTMLElement {
 				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 			</gov-button>
 		</gov-control-group>
-
-		<h2>Invalid</h2>
-		<gov-form-control type="input" id="metro2">
-			<gov-control-group bordered invalid="true">
-				<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="s"></gov-form-input>
-				<gov-button variant="primary" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
-				</gov-button>
-				<gov-button variant="primary" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
-				</gov-button>
-				<gov-button variant="primary" type="outlined" size="s">
-					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-				</gov-button>
-			</gov-control-group>
-			<gov-form-message slot="bottom" variant="error">
-				<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-				Required
-			</gov-form-message>
-		</gov-form-control>
-		<br />
-		<gov-form-control type="input" id="metro2">
-			<gov-control-group invalid="true">
-				<gov-form-select name="test-me" size="m">
-					<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-button variant="primary" type="outlined" size="m">
-					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-				</gov-button>
-			</gov-control-group>
-			<gov-form-message slot="bottom" variant="error">
-				<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-				Required
-			</gov-form-message>
-		</gov-form-control>
-		<br />
-		<gov-form-control type="input" id="metro2">
-			<gov-control-group bordered invalid="true">
-				<gov-button variant="primary" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="gear"></gov-icon>
-				</gov-button>
-				<gov-form-file name="test-me-c" accept="image/*" max-file-size="1024">
-					<gov-button variant="primary" type="outlined" size="l" tabindex="-1">
-						Nahrát soubor ze zařízení
-					</gov-button>
-				</gov-form-file>
-				<gov-button variant="primary" type="outlined" size="l">
-					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-				</gov-button>
-			</gov-control-group>
-			<gov-form-message slot="bottom" variant="error">
-				<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-				Required
-			</gov-form-message>
-		</gov-form-control>
-		<br />
-		<gov-form-control type="input" id="metro2">
-			<gov-control-group bordered invalid="true">
-				<gov-button variant="primary" type="outlined" size="xl">
-					<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
-				</gov-button>
-				<gov-button variant="primary" type="outlined" size="xl">
-					<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
-				</gov-button>
-				<gov-form-select name="test-me" size="xl">
-					<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-button variant="primary" type="outlined" size="xl">
-					<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-				</gov-button>
-			</gov-control-group>
-			<gov-form-message slot="bottom" variant="error">
-				<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
-				Required
-			</gov-form-message>
-		</gov-form-control>
-
-		<h2>Disabled</h2>
-		<gov-control-group bordered disabled="true">
-			<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="s"></gov-form-input>
-			<gov-button variant="primary" type="outlined" size="s">
-				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
-			</gov-button>
-			<gov-button variant="primary" type="outlined" size="s">
-				<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
-			</gov-button>
-			<gov-button variant="primary" type="outlined" size="s">
-				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-			</gov-button>
-		</gov-control-group>
-		<br />
-		<gov-control-group disabled="true">
-			<gov-form-select name="test-me" size="m">
-				<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-button variant="primary" type="outlined" size="m">
-				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-			</gov-button>
-		</gov-control-group>
-		<br />
-		<gov-control-group bordered disabled="true">
-			<gov-button variant="primary" type="outlined" size="l">
-				<gov-icon slot="left-icon" name="gear"></gov-icon>
-			</gov-button>
-			<gov-form-file name="test-me-c" accept="image/*" max-file-size="1024">
-				<gov-button variant="primary" type="outlined" size="l" tabindex="-1">
-					Nahrát soubor ze zařízení
-				</gov-button>
-			</gov-form-file>
-			<gov-button variant="primary" type="outlined" size="l">
-				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-			</gov-button>
-		</gov-control-group>
-		<br />
-		<gov-control-group bordered disabled="true">
-		<gov-button variant="primary" type="outlined" size="xl">
-				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
-			</gov-button>
-			<gov-button variant="primary" type="outlined" size="xl">
-				<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
-			</gov-button>
-			<gov-form-select name="test-me" size="xl">
-				<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-button variant="primary" type="outlined" size="xl">
-				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
-			</gov-button>
-		</gov-control-group>
 		`;
   }
 }