Add deprecation notice to all DSG pages

Wikimedia Design Style Guide is deprecated and will be archived soon. Visit its improved and enhanced successor: Codex, Design System for Wikimedia at https://doc.wikimedia.org/codex/latest/ Bug: [T347754](https://phabricator.wikimedia.org/T347754)
wikimedia · Jan 18, 2024 · dc18a7d · dc18a7d
1 parent 781f2b0
commit dc18a7d
Show file tree

Hide file tree

Showing 29 changed files with 340 additions and 2 deletions.
diff --git a/apps/apps.html b/apps/apps.html
@@ -80,6 +80,10 @@ <h6 class="site__title"><a href="../"><span class="site__org">Wikimedia </span><
 			</div>
 			<div class="col col--end">
 				<main id="content" class="content">
+					<div class="cdx-message cdx-message--block cdx-message--warning" aria-live="polite">
+						<span class="cdx-message__icon"></span>
+						<div class="cdx-message__content">Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:<br><a href="https://doc.wikimedia.org/codex/latest/" target="_blank">Codex, Design System for Wikimedia</a>.</div>
+					</div>
 					<h1 class="page__title">Wikimedia Design System and Apps</h1>
 					<div class="figures-box">
 						<figure class="apps__intro figure--comparison">

diff --git a/components/button-groups.html b/components/button-groups.html
@@ -73,6 +73,10 @@ <h6 class="site__title"><a href="../"><span class="site__org">Wikimedia </span><
 			</div>
 			<div class="col col--end">
 				<main id="content" class="content">
+					<div class="cdx-message cdx-message--block cdx-message--warning" aria-live="polite">
+						<span class="cdx-message__icon"></span>
+						<div class="cdx-message__content">Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:<br><a href="https://doc.wikimedia.org/codex/latest/" target="_blank">Codex, Design System for Wikimedia</a>.</div>
+					</div>
 					<div class="page__parent-title">Components</div>
 					<h1 class="page__title">Button groups</h1>
 					<p class="page__lead">Buttons in button groups signal a number of equally important actions that will occur when the user taps on them. Button groups can include normal buttons with icon and or text label (dropdown) or any mixture of the three.</p>

diff --git a/components/buttons.html b/components/buttons.html
@@ -73,6 +73,10 @@ <h6 class="site__title"><a href="../"><span class="site__org">Wikimedia </span><
 			</div>
 			<div class="col col--end">
 				<main id="content" class="content">
+					<div class="cdx-message cdx-message--block cdx-message--warning" aria-live="polite">
+						<span class="cdx-message__icon"></span>
+						<div class="cdx-message__content">Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:<br><a href="https://doc.wikimedia.org/codex/latest/" target="_blank">Codex, Design System for Wikimedia</a>.</div>
+					</div>
 					<div class="page__parent-title">Components</div>
 					<h1 class="page__title">Buttons</h1>
 					<p class="page__lead">Buttons signal an action that will occur when the user clicks or taps on them. </p>

diff --git a/components/checkboxes.html b/components/checkboxes.html
@@ -73,6 +73,10 @@ <h6 class="site__title"><a href="../"><span class="site__org">Wikimedia </span><
 			</div>
 			<div class="col col--end">
 				<main id="content" class="content">
+					<div class="cdx-message cdx-message--block cdx-message--warning" aria-live="polite">
+						<span class="cdx-message__icon"></span>
+						<div class="cdx-message__content">Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:<br><a href="https://doc.wikimedia.org/codex/latest/" target="_blank">Codex, Design System for Wikimedia</a>.</div>
+					</div>
 					<div class="page__parent-title">Components</div>
 					<h1 class="page__title">Checkboxes</h1>
 					<p class="page__lead">Checkboxes signal to the user that an option is selectable. They allow for users to select as many or as few checkable options as listed. The checkable option states for the user are selected, unselected or indeterminate.</p>

diff --git a/components/comboboxes.html b/components/comboboxes.html
@@ -73,6 +73,10 @@ <h6 class="site__title"><a href="../"><span class="site__org">Wikimedia </span><
 			</div>
 			<div class="col col--end">
 				<main id="content" class="content">
+					<div class="cdx-message cdx-message--block cdx-message--warning" aria-live="polite">
+						<span class="cdx-message__icon"></span>
+						<div class="cdx-message__content">Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:<br><a href="https://doc.wikimedia.org/codex/latest/" target="_blank">Codex, Design System for Wikimedia</a>.</div>
+					</div>
 					<div class="page__parent-title">Components</div>
 					<h1 class="page__title">Comboboxes</h1>
 					<p class="page__lead">Comboboxes combine a <a href="text-inputs-and-textarea.html">text input</a> with autocomplete and a <a href="dropdowns.html">dropdown button</a>.</p>

diff --git a/components/dialogs.html b/components/dialogs.html
@@ -73,6 +73,10 @@ <h6 class="site__title"><a href="../"><span class="site__org">Wikimedia </span><
 			</div>
 			<div class="col col--end">
 				<main id="content" class="content">
+					<div class="cdx-message cdx-message--block cdx-message--warning" aria-live="polite">
+						<span class="cdx-message__icon"></span>
+						<div class="cdx-message__content">Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:<br><a href="https://doc.wikimedia.org/codex/latest/" target="_blank">Codex, Design System for Wikimedia</a>.</div>
+					</div>
 					<div class="page__parent-title">Components</div>
 					<h1 class="page__title">Dialogs</h1>
 					<p class="page__lead">Dialogs are elements that are overlaid on a web page or app in order to present necessary information and tasks. Dialogs are also sometimes referred to as modals and overlays.</p>

diff --git a/components/dropdowns.html b/components/dropdowns.html
@@ -73,6 +73,10 @@ <h6 class="site__title"><a href="../"><span class="site__org">Wikimedia </span><
 			</div>
 			<div class="col col--end">
 				<main id="content" class="content">
+					<div class="cdx-message cdx-message--block cdx-message--warning" aria-live="polite">
+						<span class="cdx-message__icon"></span>
+						<div class="cdx-message__content">Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:<br><a href="https://doc.wikimedia.org/codex/latest/" target="_blank">Codex, Design System for Wikimedia</a>.</div>
+					</div>
 					<div class="page__parent-title">Components</div>
 					<h1 class="page__title">Dropdowns</h1>
 					<p class="page__lead"></p>

diff --git a/components/file-inputs.html b/components/file-inputs.html
@@ -73,6 +73,10 @@ <h6 class="site__title"><a href="../"><span class="site__org">Wikimedia </span><
 			</div>
 			<div class="col col--end">
 				<main id="content" class="content">
+					<div class="cdx-message cdx-message--block cdx-message--warning" aria-live="polite">
+						<span class="cdx-message__icon"></span>
+						<div class="cdx-message__content">Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:<br><a href="https://doc.wikimedia.org/codex/latest/" target="_blank">Codex, Design System for Wikimedia</a>.</div>
+					</div>
 					<div class="page__parent-title">Components</div>
 					<h1 class="page__title">File inputs</h1>
 					<p class="page__lead">File inputs allow users to select files from their system for upload.</p>

diff --git a/components/language-selectors.html b/components/language-selectors.html
@@ -73,6 +73,10 @@ <h6 class="site__title"><a href="../"><span class="site__org">Wikimedia </span><
 			</div>
 			<div class="col col--end">
 				<main id="content" class="content">
+					<div class="cdx-message cdx-message--block cdx-message--warning" aria-live="polite">
+						<span class="cdx-message__icon"></span>
+						<div class="cdx-message__content">Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:<br><a href="https://doc.wikimedia.org/codex/latest/" target="_blank">Codex, Design System for Wikimedia</a>.</div>
+					</div>
 					<div class="page__parent-title">Components</div>
 					<h1 class="page__title">Language selectors</h1>
 					<p class="page__lead">Language selectors allow users to pick languages from a list. In projects like <a href="https://wikipedia.org/" target="_blank" rel="noopener">Wikipedia</a> with 300+ language Wikipedias, or software like <a href="https://mediawiki.org/" target="_blank" rel="noopener">MediaWiki</a> with 350+ languages supported, language selection is crucial and can occur in many different contexts.</p>

diff --git a/components/links.html b/components/links.html
@@ -73,6 +73,10 @@ <h6 class="site__title"><a href="../"><span class="site__org">Wikimedia </span><
 			</div>
 			<div class="col col--end">
 				<main id="content" class="content">
+					<div class="cdx-message cdx-message--block cdx-message--warning" aria-live="polite">
+						<span class="cdx-message__icon"></span>
+						<div class="cdx-message__content">Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:<br><a href="https://doc.wikimedia.org/codex/latest/" target="_blank">Codex, Design System for Wikimedia</a>.</div>
+					</div>
 					<div class="page__parent-title">Components</div>
 					<h1 class="page__title">Links</h1>
 					<p class="page__lead">Links signal an action that will let the user navigate to another page, view or resource, when they click or tap on them. The following examples are emphasized in bold for presentation only.</p>

diff --git a/components/messages.html b/components/messages.html
@@ -73,6 +73,10 @@ <h6 class="site__title"><a href="../"><span class="site__org">Wikimedia </span><
 			</div>
 			<div class="col col--end">
 				<main id="content" class="content">
+					<div class="cdx-message cdx-message--block cdx-message--warning" aria-live="polite">
+						<span class="cdx-message__icon"></span>
+						<div class="cdx-message__content">Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:<br><a href="https://doc.wikimedia.org/codex/latest/" target="_blank">Codex, Design System for Wikimedia</a>.</div>
+					</div>
 					<div class="page__parent-title">Components</div>
 					<h1 class="page__title">Messages</h1>
 					<p class="page__lead">Messages to the user as system feedback can be delivered as block message with a longer explanation. The block messages, predominantly used in top or banner positions in the view are defined on this page. Or as inline message directly to an input component. For inline validation messages, see <a href="text-inputs-and-textarea.html#designing">designing text inputs</a>.</p>

diff --git a/components/number-inputs.html b/components/number-inputs.html
@@ -73,6 +73,10 @@ <h6 class="site__title"><a href="../"><span class="site__org">Wikimedia </span><
 			</div>
 			<div class="col col--end">
 				<main id="content" class="content">
+					<div class="cdx-message cdx-message--block cdx-message--warning" aria-live="polite">
+						<span class="cdx-message__icon"></span>
+						<div class="cdx-message__content">Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:<br><a href="https://doc.wikimedia.org/codex/latest/" target="_blank">Codex, Design System for Wikimedia</a>.</div>
+					</div>
 					<div class="page__parent-title">Components</div>
 					<h1 class="page__title">Number inputs</h1>
 					<p class="page__lead">Number inputs allow users to input numbers or decrease/increase number values by attached buttons.</p>

diff --git a/components/radio-buttons.html b/components/radio-buttons.html
@@ -73,6 +73,10 @@ <h6 class="site__title"><a href="../"><span class="site__org">Wikimedia </span><
 			</div>
 			<div class="col col--end">
 				<main id="content" class="content">
+					<div class="cdx-message cdx-message--block cdx-message--warning" aria-live="polite">
+						<span class="cdx-message__icon"></span>
+						<div class="cdx-message__content">Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:<br><a href="https://doc.wikimedia.org/codex/latest/" target="_blank">Codex, Design System for Wikimedia</a>.</div>
+					</div>
 					<div class="page__parent-title">Components</div>
 					<h1 class="page__title">Radio buttons</h1>
 					<p class="page__lead">Radio buttons are part of a group of two or more. They signal an action where users can only select one radio button.</p>

diff --git a/components/text-inputs-and-textarea.html b/components/text-inputs-and-textarea.html
@@ -73,6 +73,10 @@ <h6 class="site__title"><a href="../"><span class="site__org">Wikimedia </span><
 			</div>
 			<div class="col col--end">
 				<main id="content" class="content">
+					<div class="cdx-message cdx-message--block cdx-message--warning" aria-live="polite">
+						<span class="cdx-message__icon"></span>
+						<div class="cdx-message__content">Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:<br><a href="https://doc.wikimedia.org/codex/latest/" target="_blank">Codex, Design System for Wikimedia</a>.</div>
+					</div>
 					<div class="page__parent-title">Components</div>
 					<h1 class="page__title">Text inputs and textarea</h1>
 					<p class="page__lead">Text inputs allow users to input text or select text via optional autocomplete or dropdown menu.</p>

diff --git a/components/toggle-switches.html b/components/toggle-switches.html
@@ -73,6 +73,10 @@ <h6 class="site__title"><a href="../"><span class="site__org">Wikimedia </span><
 			</div>
 			<div class="col col--end">
 				<main id="content" class="content">
+					<div class="cdx-message cdx-message--block cdx-message--warning" aria-live="polite">
+						<span class="cdx-message__icon"></span>
+						<div class="cdx-message__content">Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:<br><a href="https://doc.wikimedia.org/codex/latest/" target="_blank">Codex, Design System for Wikimedia</a>.</div>
+					</div>
 					<div class="page__parent-title">Components</div>
 					<h1 class="page__title">Toggle switches</h1>
 					<p class="page__lead">Toggle switches signal an instant choice to the user.</p>

diff --git a/css/build/wmui-style-guide.css b/css/build/wmui-style-guide.css
@@ -437,6 +437,9 @@ template {
 	/* HACK; Add Georgia to serif fallback as long as WikimediaUI Base isn't updated. */ /* stylelint-disable-line value-keyword-case */
 	/* Setting bold to `600` as our stack works better with it, only Lato is on the edge.
 	   Helvetica and Arial fallback gracefully to `700`, see T246791. */
+
+	/* .cdx-message only custom properties */
+	/* Different from WikimediaUI Base's. */
 }
 * {
 	-moz-box-sizing: border-box;
@@ -686,6 +689,115 @@ sup {
 .content__illustration-style .figure--full:after {
 	clear: both;
 }
+/* ::: Codex Messages ::: */
+.cdx-message {
+	/* Background color and color are for notice type messages. */
+	/* These will be overridden for other message types. */
+	background-color: var( --background-color-notice-subtle );
+	color: #000;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-align: start;
+	    -ms-flex-align: start;
+	        align-items: flex-start;
+	position: relative;
+	margin-bottom: 32px;
+	border: 1px solid #a2a9b1;
+	padding: 16px 16px;
+
+	@media screen and ( min-width: 768px ) {
+		padding-right: 24px;
+		padding-left: 24px;
+	}
+}
+/* Set the default CSS icon to the icon for notice messages, which is the default message type. */
+/* The icon and icon color will be overridden for other message types below. */
+/* The color of the Vue icon for notice messages is inherited from the color rule set on */
+/* .cdx-message.
+	.cdx-message__icon {
+		background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill=""><path d="M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0M9 5h2v2H9zm0 4h2v6H9z"/></svg>' );
+	}
+	*/
+.cdx-message--warning {
+		background-color: #fef6e7;
+		border-color: #ac6600;
+	}
+.cdx-message__icon {
+		/* background-image: url( data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%Aac6600"><path d="M11.53 2.3A1.85 1.85 0 0010 1.21 1.85 1.85 0 008.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"/></svg>' ); */
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: 1.5em;
+		background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23edab00"><path d="M11.53 2.3A1.85 1.85 0 0010 1.21 1.85 1.85 0 008.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"/></svg>' );
+		min-width: 20px;
+		min-height: 20px;
+		width: 1.5em;
+		/* Vertically align icon with the text. Flexbox on its own is not enough here. */
+		/* Use close enough height to `&__content`'s `line-height`. */
+		height: 1.5em;
+	}
+.cdx-message--user-dismissable {
+		padding-right: calc( var( --min-size-interactive-pointer ) + 16px);
+
+		@media screen and ( min-width: 768px ) {
+			padding-right: calc( var( --min-size-interactive-pointer ) + 24px);
+		}
+	}
+.cdx-message__content {
+		/* Vertically center message with icon. */
+		-ms-flex-item-align: center;
+		    align-self: center;
+		-webkit-box-flex: 1;
+		    -ms-flex-positive: 1;
+		        flex-grow: 1;
+		/* Add space between icon and message content. */
+		margin-left: 8px;
+		word-wrap: break-word;
+		/* CSS3 hyphenation
+		// Chrome < 55 and Android 4.0 Browser support "-webkit-hyphens: none",
+		// but not the "auto" property. It is advisable to set the @lang attribute
+		// on the HTML element to enable hyphenation support and improve accessibility.
+		// Chrome 55-87 only supports `auto` exclusively on Mac platform.
+		*/
+		/* stylelint-disable plugin/no-unsupported-browser-features */
+		-webkit-hyphens: auto;
+		-moz-hyphens: auto;
+		-ms-hyphens: auto;
+		hyphens: auto;
+		/* stylelint-enable plugin/no-unsupported-browser-features */
+	}
+.cdx-message__content,
+	.cdx-message__content > * {
+		line-height: 1.6;
+	}
+.cdx-message__content > *:first-child {
+		margin-top: 0;
+		padding-top: 0;
+	}
+.cdx-message__content > *:last-child {
+		margin-bottom: 0;
+		padding-bottom: 0;
+	}
+/*
+	.cdx-message__dismiss-button.cdx-button {
+		position: absolute;
+		/* Use `spacing` tokens as the top/right axis orientation can always be in pixels, * /
+		/* similar to paddings * /
+		top: var( --spacing-75 );
+		right: var( --spacing-100 );
+		padding: var( --spacing-30 );
+		/* Remove `line-height` to not overgrow button. * /
+		line-height: 0;
+
+		@media screen and ( min-width: 768px ) {
+			right: var( --spacing-50 );
+		}
+	}
+	*/
+/* Add space between stacked messages. */
+.cdx-message + .cdx-message {
+		margin-top: 8px;
+	}
 /* ::: Text-formatting ::: */
 /* Support Blink based browsers. */
 /* They use `outline` for focus styles, we're only amending the color here, see T245887. */

diff --git a/css/build/wmui-style-guide.min.css b/css/build/wmui-style-guide.min.css
diff --git a/css/build/wmui-style-guide.min.css.map b/css/build/wmui-style-guide.min.css.map