Remove tab components in favor of Codex

jdlrobson · Oct 26, 2024 · dec4092 · dec4092
1 parent 8227587
commit dec4092
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 133 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=1400px, initial-scale=0.22">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" href="./src/index.less">
+  <link rel="stylesheet" href="./node_modules/@wikimedia/codex/dist/codex.style.css">
   <title>Wikimedia Skins Lab</title>
 </head>
 <body>

diff --git a/src/components/Tab.vue b/src/components/Tab.vue
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
diff --git a/src/pages/Add.vue b/src/pages/Add.vue
@@ -33,29 +33,36 @@
 			>
 			</preview>
 			<div class="page__edit-area">
-				<div>
-					<div title="HTML ( Mustache )">
-						<textarea class="editor-textarea"
-							:value="mustache"
-							@input="updateMustache"></textarea>
-					</div>
-					<div title="CSS / LESS">
-						<textarea class="editor-textarea"
-							:value="less"
-							@input="updateCSS"></textarea>
-						<btn class="css-theme-changer"
-							@click="newTheme">
-							Change theme
-						</btn>
-						<color-chart :colors="colorChart"
-							@toggleColor="toggleColor"></color-chart>
-					</div>
-					<div title="JS">
-						<textarea class="editor-textarea"
-							:value="js"
-							@input="updateJS"></textarea>
-					</div>
-				</div>
+				<cdx-tabs>
+					<cdx-tab
+						v-for="( tab, index ) in tabsData"
+						:key="index"
+						:name="tab.name"
+						:label="tab.label"
+					>
+						<template v-if="tab.name === 'html'">
+							<textarea class="editor-textarea"
+								:value="mustache"
+								@input="updateMustache"></textarea>
+						</template>
+						<template v-if="tab.name === 'css'">
+							<textarea class="editor-textarea"
+								:value="less"
+								@input="updateCSS"></textarea>
+							<btn class="css-theme-changer"
+								@click="newTheme">
+								Change theme
+							</btn>
+							<color-chart :colors="colorChart"
+								@toggleColor="toggleColor"></color-chart>
+						</template>
+						<template v-if="tab.name === 'js'">
+							<textarea class="editor-textarea"
+								:value="js"
+								@input="updateJS"></textarea>
+						</template>
+					</cdx-tab>
+				</cdx-tabs>
 				<btn class="reset-btn"
 					:destructive="true"
 					@click="reset">
@@ -86,6 +93,7 @@
 
 <script>
 /* global less */
+import { CdxTab, CdxTabs } from '@wikimedia/codex';
 import { PARTIALS, getLessVarsCode, getLessVarsRaw, JQUERY,
 	buildSkin,
 	getLESSFromTemplate, randomColor,
@@ -157,6 +165,7 @@ function getCached() {
 export default {
 	name: 'Add',
 	components: {
+		CdxTab, CdxTabs,
 		Btn,
 		Page,
 		JsonViewer,
@@ -166,6 +175,21 @@ export default {
 	data() {
 		return Object.assign( getCached(), {
 			templateDataReq: {},
+			tabsData: [
+				{
+					name: 'html',
+					label: 'HTML ( Mustache )',
+					heading: 'Sand cat'
+				}, {
+					name: 'css',
+					label: 'CSS',
+					heading: 'View source for Sand cat'
+				}, {
+					name: 'js',
+					label: 'JS',
+					heading: 'Sand cat: Revision history'
+				}
+			],
 			pending: null,
 			variables: DEFAULT_SKIN_PROPS.variables,
 			json: '',