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

package/dist/collection/data/font-definitions.js

@@ -0,0 +1,94 @@
+export const fonts = [
+	{
+		name: 'X-Small',
+		description:
+			'The font size denoted as X-Small, which exclusively finds its usage in the mobile applications designed for iOS and Android platforms.',
+		size: 'xs',
+		definitions: {
+			px: '12px',
+			rem: '0.75rem',
+		},
+	},
+	{
+		name: 'Small',
+		description:
+			'The utilization of the Small font size should be limited to a certain extent, particularly for annotations, descriptions, and other comparable content.',
+		size: 's',
+		definitions: {
+			px: '14px',
+			rem: '0.875rem',
+		},
+	},
+	{
+		name: 'Medium',
+		description: 'The body text is typically rendered using the Medium font size.',
+		size: 'm',
+		definitions: {
+			px: '16px',
+			rem: '1rem',
+		},
+	},
+	{
+		name: 'Large',
+		description: 'The Large font size is employed for creating small sub-headings',
+		size: 'l',
+		definitions: {
+			px: '18px',
+			rem: '1.125rem',
+		},
+	},
+	{
+		name: 'X-Large',
+		description: 'When creating large sub-headings, the X-Large font size is typically utilized.',
+		size: 'xl',
+		definitions: {
+			px: '20px',
+			rem: '1.25rem',
+		},
+	},
+	{
+		name: '2X-Large',
+		description: 'The primary heading on tablet-sized devices is generally displayed using the XX-Large font size.',
+		size: '2xl',
+		definitions: {
+			px: '24px',
+			rem: '1.375rem',
+		},
+	},
+	{
+		name: '3X-Large',
+		description: 'On desktop devices, the main heading is commonly presented in the XXX-Large font size.',
+		size: '3xl',
+		definitions: {
+			px: '32px',
+			rem: '1.625rem',
+		},
+	},
+	{
+		name: '4x-Large',
+		description: 'The usage of the XXXX-Large font size is primarily reserved for marketing purposes and banners.',
+		size: '4xl',
+		definitions: {
+			px: '40px',
+			rem: '2rem',
+		},
+	},
+	{
+		name: '5X-Large',
+		description: null,
+		size: '5xl',
+		definitions: {
+			px: '48px',
+			rem: '2.25rem',
+		},
+	},
+	{
+		name: '6X-Large',
+		description: null,
+		size: '6xl',
+		definitions: {
+			px: '64px',
+			rem: '3rem',
+		},
+	},
+];

package/dist/collection/pages/Card.js

@@ -15,15 +15,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>

package/dist/collection/pages/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../src/pages/Card.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;EACjC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FhB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE;EAClD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;CAC5C","sourcesContent":["class CardPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\n\t\t<div style=\"max-width: 650px\">\n\t\t\t<h2>Card</h2>\n\n\t\t\t<gov-card label=\"Fusce tellus odio, dapibus id fermentum quis\" expanded collapsible class=\"gov-bg--success-100\">\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.\n\t\t\t\t</p>\n\t\t\t</gov-card>\n\n\t\t\t<br>\n\n\t\t\t<div style=\"height: 400px\">\n\t\t\t\t<gov-card label=\"Fusce tellus odio, dapibus id fermentum quis\" expanded collapsible>\n\t\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.\n\t\t\t\t\t</p>\n\t\t\t\t\t<gov-button variant=\"primary\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\t\tButton\n\t\t\t\t\t</gov-button>\n\t\t\t\t\t<p slot=\"footer\" class=\"gov-color--primary-700\">\n\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-card>\n\t\t\t</div>\n\t\t\t<br>\n\t\t\t<gov-card label=\"Fusce tellus odio, dapibus id fermentum quis\">\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.\n\t\t\t\t</p>\n\t\t\t\t<gov-button variant=\"primary\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tButton\n\t\t\t\t</gov-button>\n\t\t\t\t<p slot=\"footer\" color=\"gov-color--primary-700\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.\n\t\t\t\t</p>\n\t\t\t</gov-card>\n\t\t\t<h3>Image slot</h3>\n\t\t\t<gov-card expanded>\n\t\t\t\t<img slot=\"img\" src=\"https://picsum.photos/536/354\" src=\"\" alt=\"Obárzek\" width=\"536\" height=\"354\">\n\t\t\t\t<p class=\"gov-text--l gov-color--secondary-800\">\n\t\t\t\t\t<b>\n\t\t\t\t\t\tCommodo consequat.\n\t\t\t\t\t</b>\n\t\t\t\t</p>\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tCommodo consequat. Nullam rhoncus aliquam metus.\n\t\t\t\t</p>\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\t<a href=\"#\">Chci vědět více</a>\n\t\t\t\t</p>\n\t\t\t</gov-card>\n\t\t\t<h3>Shadow variant</h3>\n\t\t\t<gov-card expanded class=\"gov-box-shadow--m\">\n\t\t\t\t<img slot=\"img\" src=\"https://picsum.photos/536/354\" src=\"\" alt=\"Obárzek\" width=\"536\" height=\"354\">\n\t\t\t\t<p class=\"gov-text--l gov-color--secondary-800\">\n\t\t\t\t\t<b>\n\t\t\t\t\t\tCommodo consequat.\n\t\t\t\t\t</b>\n\t\t\t\t</p>\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tCommodo consequat. Nullam rhoncus aliquam metus.\n\t\t\t\t</p>\n\t\t\t\t<gov-button variant=\"primary\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tJak založit\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tZjistit více\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<h3>With icon</h3>\n\t\t\t<gov-card>\n\t\t\t\t<gov-icon name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.\n\t\t\t\t</p>\n\t\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<h3>Horizontal orientation</h3>\n\t\t\t<gov-card promotion>\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.\n\t\t\t\t</p>\n\t\t\t\t<gov-button slot=\"btn\" variant=\"primary\" type=\"outlined\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t</div>\n\n\t\t`\n\t}\n}\n\nif (customElements.get('card-page') === undefined) {\n\tcustomElements.define('card-page', CardPage)\n}\n"]}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../src/pages/Card.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;EACjC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+FhB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE;EAClD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;CAC5C","sourcesContent":["class CardPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\n\t\t<div style=\"max-width: 650px\">\n\t\t\t<h2>Card</h2>\n\n\t\t\t<gov-card label=\"Fusce tellus odio, dapibus id fermentum quis\" expanded collapsible class=\"gov-bg--success-100\">\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.\n\t\t\t\t</p>\n\t\t\t</gov-card>\n\n\t\t\t<br>\n\n\t\t\t<div style=\"height: 400px\">\n\t\t\t\t<gov-card label=\"Fusce tellus odio, dapibus id fermentum quis\" expanded collapsible>\n\t\t\t\t\t<div class=\"gov-content\">\n\t\t\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<gov-button variant=\"primary\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\t\t\tButton\n\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t<p slot=\"footer\" class=\"gov-color--primary-700\">\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</gov-card>\n\t\t\t</div>\n\t\t\t<br>\n\t\t\t<gov-card label=\"Fusce tellus odio, dapibus id fermentum quis\">\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.\n\t\t\t\t</p>\n\t\t\t\t<gov-button variant=\"primary\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tButton\n\t\t\t\t</gov-button>\n\t\t\t\t<p slot=\"footer\" color=\"gov-color--primary-700\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.\n\t\t\t\t</p>\n\t\t\t</gov-card>\n\t\t\t<h3>Image slot</h3>\n\t\t\t<gov-card expanded>\n\t\t\t\t<img slot=\"img\" src=\"https://picsum.photos/536/354\" src=\"\" alt=\"Obárzek\" width=\"536\" height=\"354\">\n\t\t\t\t<p class=\"gov-text--l gov-color--secondary-800\">\n\t\t\t\t\t<b>\n\t\t\t\t\t\tCommodo consequat.\n\t\t\t\t\t</b>\n\t\t\t\t</p>\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tCommodo consequat. Nullam rhoncus aliquam metus.\n\t\t\t\t</p>\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\t<a href=\"#\">Chci vědět více</a>\n\t\t\t\t</p>\n\t\t\t</gov-card>\n\t\t\t<h3>Shadow variant</h3>\n\t\t\t<gov-card expanded class=\"gov-box-shadow--m\">\n\t\t\t\t<img slot=\"img\" src=\"https://picsum.photos/536/354\" src=\"\" alt=\"Obárzek\" width=\"536\" height=\"354\">\n\t\t\t\t<p class=\"gov-text--l gov-color--secondary-800\">\n\t\t\t\t\t<b>\n\t\t\t\t\t\tCommodo consequat.\n\t\t\t\t\t</b>\n\t\t\t\t</p>\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tCommodo consequat. Nullam rhoncus aliquam metus.\n\t\t\t\t</p>\n\t\t\t\t<gov-button variant=\"primary\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tJak založit\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tZjistit více\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<h3>With icon</h3>\n\t\t\t<gov-card>\n\t\t\t\t<gov-icon name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.\n\t\t\t\t</p>\n\t\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<h3>Horizontal orientation</h3>\n\t\t\t<gov-card promotion>\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<p class=\"gov-color--secondary-700\">\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.\n\t\t\t\t</p>\n\t\t\t\t<gov-button slot=\"btn\" variant=\"primary\" type=\"outlined\" size=\"s\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t</div>\n\n\t\t`\n\t}\n}\n\nif (customElements.get('card-page') === undefined) {\n\tcustomElements.define('card-page', CardPage)\n}\n"]}

package/dist/collection/pages/Forms.js

@@ -76,6 +76,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>
@@ -107,6 +114,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>
@@ -353,6 +372,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>
@@ -837,6 +864,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>