umberto 7.0.2 → 8.0.1

package/themes/umberto/layout/gloria/theme.pug

@@ -0,0 +1,304 @@
+h2 SVG Icon
+
++svg-icon({ icon: 'github', fill: 'red' })
++svg-icon({ icon: 'github', fill: 'purple', size: 'lg' })
+
+br
+br
+
+h2 Badge
+
++badge({ variant: 'status', tooltip: 'Custom tooltip' })
++badge({ variant: 'premium' })
++badge({ variant: 'experiment' })
+
+br
+br
+
+h2 Tag
+
++tagWrapper()
+	+tag({ label: 'Inherited' })
+	+tag({ label: 'Inherited', icon : 'github', iconSize: 'xs'  })
+	+tag({ label: 'Inherited', icon : 'github', iconSize: 'xs', href: '#' })
+
+br
+br
+
+h3 API tag
+
++tag({ label: 'Interface', icon : 'api-interface', className: 'tag--api tag--api-interface' })
+
+br
+br
+
+h2 Checkbox
+
++checkbox({ name: 'terms', label: 'It\'s expanded checkbox', expanded: true })
++checkbox({ name: 'terms', label: 'I agree to the terms and conditions' })
+|   
++checkbox({ name: 'newsletter', label: 'Subscribe to newsletter', checked: true })
+|   
++checkbox({ name: 'disabled', label: 'Disabled checkbox', disabled: true })
+
+br
+br
+
+h2 Radio buttons
+
++checkbox({ type: 'radio', name: 'options', label: 'Option 1', value: 'option1' })
+|   
++checkbox({ type: 'radio', name: 'options', label: 'Option 2', value: 'option2', checked: true })
+|   
++checkbox({ type: 'radio', name: 'options', label: 'Option 3', value: 'option3' })
+
+br
+
++checkbox({ type: 'radio', name: 'options-disabled', label: 'Disabled radio', disabled: true })
++checkbox({ type: 'radio', name: 'expanded', label: 'Expanded radio button', expanded: true })
+
+br
+br
+
+h2 Button
+
++button({ label: 'Click me', icon: 'github' })
++button({ label: 'Click me', icon: 'github', variant: 'secondary' })
++button({ label: 'Click me', icon: 'github', variant: 'toolbar' })
++button({ icon: 'github', variant: 'toolbar', ariaLabel: 'Click me' })
++button({ icon: 'github', variant: 'transparent', fillColor: '--color-orange-600' })
+
+br
+br
+
+h3 Sizes
+
++button({ label: 'Extra small button', size: 'xs'})
++button({ label: 'Small button', size: 'sm'})
++button({ label: 'Base button', size: 'base'})
++button({ label: 'Large button', size: 'lg'})
+
+br
+br
+
+h3 (disabled)
+
++button({ label: 'Click me', icon: 'github', disabled: true })
++button({ label: 'Click me', icon: 'github', variant: 'secondary', disabled: true })
++button({ label: 'Click me', icon: 'github', variant: 'toolbar', disabled: true })
+
+br
+br
+
+h3 Button link
+
++button-link({ label: 'I\'m a link!', icon: 'github', variant: 'secondary', href: '#' })
+
+br
+br
+
+h2 Search input
+
++input({ type: 'text', icon: 'search', placeholder: 'Search...' })
++input({ type: 'text', icon: 'search', placeholder: 'Search...', disabled: true })
++input({ type: 'text', icon: 'search', iconPosition: 'right', placeholder: 'Search...' })
+
+br
+br
+
+h2 Menu Dropdown
+
+div
+	+menu-dropdown({ preferredDirection: 'up', label: 'Menu (up)' })
+		+dropdown-item({ label: 'Item 1' })
+		+dropdown-item({ label: 'Item 2', active: true })
+		+dropdown-item({ label: 'Item 3' })
+
+	+menu-dropdown({ preferredDirection: 'down', label: 'Menu (down)' })
+		+dropdown-item({ label: 'Item 1' })
+		+dropdown-item({ label: 'Item 2', active: true })
+		+dropdown-item({ label: 'Item 3' })
+
+br
+br
+
+h2 Dropdown
+
+div
+	+dropdown({ preferredDirection: 'down', contentId: 'dropdown-1' })
+		+trigger
+			+button({ label: 'Dropdown (down)', icon: 'github', variant: 'toolbar' })(
+				aria-haspopup='true',
+				aria-expanded='false',
+				aria-controls='dropdown-1'
+			)
+
+		+content
+			+dropdown-item({ label: 'Item 1' })
+			+dropdown-item({ label: 'Item 2', active: true })
+			+dropdown-item({ label: 'Item 3' })
+
+	+dropdown({ preferredDirection: 'up', contentId: 'up-dropdown-1' })
+		+trigger
+			+button({ label: 'Dropdown (up)', icon: 'github', variant: 'toolbar' })(
+				aria-haspopup='true',
+				aria-expanded='false',
+				aria-controls='up-dropdown-1'
+			)
+
+		+content
+			+dropdown-item({ label: 'Item 1' })
+			+dropdown-item({ label: 'Item 2', active: true })
+			+dropdown-item({ label: 'Item 3' })
+
+	+dropdown({ id: 'watch-dropdown', updateValueOnSelect: true,  contentId: 'dropdown-2' })
+		+trigger
+			+button({ label: 'It should be updated on select', icon: 'github', variant: 'toolbar' })(
+				aria-haspopup='true',
+				aria-expanded='false',
+				aria-controls='dropdown-2'
+			)
+
+		+content
+			+dropdown-item({ label: 'Item 1', value: '1' })
+			+dropdown-item({ label: 'Item 2', value: '2' })
+			+dropdown-item({ label: 'Item 3', value: '3' })
+br
+br
+
+h2 Dropdown with custom content
+
+div
+
+	+dropdown({ preferredDirection: 'down', contentId: 'down-dropdown-2' })
+		+trigger
+			+button({ icon: 'filter', variant: 'toolbar' })(
+				aria-haspopup='true',
+				aria-expanded='false',
+				aria-controls='down-dropdown-2'
+			)
+
+		+content
+			+dropdown-item()
+				+checkbox({ id:'f1', name: 'name1', label: 'Public', value: 'public', expanded: true, checked: true })
+			+dropdown-item()
+				+checkbox({ id:'f2', name: 'name5', label: 'Protected', value: 'protected', expanded: true })
+			+dropdown-item()
+				+checkbox({ id:'f3', name: 'name6', label: 'Private', value: 'private', expanded: true })
+			+dropdown-item()
+				+checkbox({ id:'f4', name: 'name2', label: 'Inherited', value: 'inherited', expanded: true, checked: true })
+			+dropdown-item()
+				+checkbox({ id:'f5', name: 'name7', label: 'Deprecated', value: 'deprecated', expanded: true })
+			+dropdown-item()
+				+checkbox({ id:'f7', name: 'name4', label: 'Internal', value: 'internal', expanded: true })
+			+dropdown-item()
+				+checkbox({ id:'f6', name: 'name3', label: 'Mixed', value: 'mixed', expanded: true })
+
+br
+br
+
+h2 Tabs
+
++tabs()
+	+tab({ id: 'tab-1', label: 'Tab 1', active: true })
+		div Tab 1 content
+	+tab({ id: 'tab-2', label: 'Tab 2', tooltip: 'Example tooltip' })
+		div Tab 2 content
+	+tab({ id: 'tab-3', label: 'Tab 3' })
+		div Tab 3 content
+
+br
+br
+
+h2 Code Tabs
+
++code-switcher
+	+code-tab({ id: 'tab-1', label: 'Tab 1', code: 'console.log("Hello world!");', active: true, language: 'js' })
+	+code-tab({
+		id: 'tab-2',
+		label: 'Tab 2',
+		tooltip: 'Example tooltip',
+		code: 'const message: string = "Hello world!";\nconsole.log(message);',
+		language: 'typescript'
+	})
+
++code-switcher
+	+code-tab({ id: 'tab-skeleton', label: 'Async', skeleton: true, active: true })
+	+code-tab({ id: 'tab-1', label: 'Tab 1', code: 'console.log("Hello world!");', language: 'js' })
+
+br
+br
+
+h2 Icon Message
+
+div(style="margin-bottom: 20px")
+	+icon-message({
+		icon: 'exclamation-circle',
+		className: 'font-weight--bold'
+	})
+		| WARNING: This is an important message!
+
+br
+br
+
+h2 Callout
+
++callout({ variant: 'info' })
+	| After resolving the comment thread the corresponding markers are no longer highlighted, however, they are still kept in the content. When you activate the annotation displayed in the comments archive, the content will be scrolled to the beginning of the marker, highlighting them at the same time.
+
++callout({ variant: 'warning' })
+	| After resolving the comment thread the corresponding markers are no longer highlighted, however, they are still kept in the content. When you activate the annotation displayed in the comments archive, the content will be scrolled to the beginning of the marker, highlighting them at the same time.
+
++callout({ variant: 'error' })
+	| After resolving the comment thread the corresponding markers are no longer highlighted, however, they are still kept in the content. When you activate the annotation displayed in the comments archive, the content will be scrolled to the beginning of the marker, highlighting them at the same time.
+
++callout({ variant: 'success' })
+	| After resolving the comment thread the corresponding markers are no longer highlighted, however, they are still kept in the content. When you activate the annotation displayed in the comments archive, the content will be scrolled to the beginning of the marker, highlighting them at the same time.
+
+br
+br
+
+h2 Fake DevTools
+
+h3 Loading state
+
++fake-devtools({ id: 'devtools--loading' })
+
+h3 With logs
+
++fake-devtools({ id: 'devtools-1' })
+
+script.
+	window.addEventListener( 'load', () => {
+		const { fakeDevtools } = document.getElementById( 'devtools-1' );
+
+		fakeDevtools.loggers.warning(
+			`%cEmailConfigurationHelper%c Do you like coffee?`,
+			'background: #E65100; color: white; padding: 2px 4px;',
+			'',
+			{ count: 2 },
+			'\nRead more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html'
+		);
+
+		fakeDevtools.loggers.info(
+			`%cEmailConfigurationHelper%c I\'ll ask you about coffee later.`,
+			'background: #4169E1; color: white; padding: 2px 4px;',
+			'',
+			'I\'m not kidding, haha!',
+		);
+
+		fakeDevtools.loggers.error( 'I\'m horrible at jokes!' );
+	} );
+
+h2 Card
+
++card({ className: "custom-card", ariaLabel: "Custom card label" })
+	+card-cover({ src: "cover.jpg", alt: "Cover image", loading: "eager" })
+	+card-title({ href: "/article", className: "featured" })
+		| Featured Article
+	+card-description({ className: "excerpt" })
+		| This is a featured article with additional content available.
+	+card-learn-more({ expanded: false })
+		h4 Additional Information
+		p Detailed content that expands when the user clicks "Learn more"
+		+button-link({ label: 'Read more', variant: 'secondary', href: '#' })

package/themes/umberto/layout/umberto/404.pug

@@ -4,7 +4,6 @@ html( lang='en' )
         meta( charset='utf-8' )
         meta( name="viewport" content="width=device-width, initial-scale=1")
         title= page[ 'meta-title' ] ? page[ 'meta-title' ] : page.title
-        link( rel = 'stylesheet', href = '/assets/' + umbertoVersion + '/umberto/css/styles.css', type='text/css' media='screen' )
     body
         header.top
 

package/themes/umberto/layout/umberto/_partial/report-issue-widget.pug

@@ -10,9 +10,6 @@ div.info-box.notice.notice__feedback
         | Please report it via our!{' '}
         a( href=githubUrl.toString() id='report-widget-issue-tracker' ) issue tracker
         | .
-    p
-        | With the release of version 42.0.0, we have rewritten much of our documentation to reflect the new import paths and features.
-        | We appreciate your feedback to help us ensure its accuracy and completeness.
 
 //- We need to inject some parameters to the URL from the `window` object on the user side.
 //- Hence, we run a script that reads the user-agent and location and injects it into the issue URL.