Make bold titles in LookupMenu optional (#282)

This is done in preparation for remaking the LookupMenu in to a more general OptionsMenu that is then to also be used for the Dropdown. And the Dropdown has Options who's label is not bold. Two options and controls are added to the story to showcase this. The two possible font weights of menu item labels (regular and bold) are now represented by two different tokens. Co-Authored-by: Sarai Sanchez <[email protected]>
wmde · Nov 24, 2020 · 517aaa3 · 517aaa3
1 parent f931fc0
commit 517aaa3
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 5 deletions.
diff --git a/tokens/properties/components/LookupMenu.json b/tokens/properties/components/LookupMenu.json
@@ -66,7 +66,12 @@
 					"value": "{font.size.style.label.value}"
 				},
 				"font-weight": {
-					"value": "{font.weight.bold.value}"
+					"regular": {
+						"value": "{font.weight.style.label.value}"
+					},
+					"bold": {
+						"value": "{font.weight.bold.value}"
+					}
 				},
 				"line-height": {
 					"value": "{font.line-height.style.label.value}"

diff --git a/vue-components/src/components/Lookup.vue b/vue-components/src/components/Lookup.vue
@@ -19,6 +19,7 @@
 		<LookupMenu
 			class="wikit-Lookup__menu"
 			:menu-items="menuItems"
+			:bold-labels="true"
 			v-show="showMenu"
 			@select="onSelect"
 			@scroll="onScroll"

diff --git a/vue-components/src/components/LookupMenu.vue b/vue-components/src/components/LookupMenu.vue
@@ -18,7 +18,12 @@
 			@mouseup="activeItemIndex = -1"
 			ref="menu-items"
 		>
-			<div class="wikit-LookupMenu__item__label">
+			<div
+				:class="{
+					'wikit-LookupMenu__item__label': true,
+					'wikit-LookupMenu__item__label--bold': boldLabels,
+				}"
+			>
 				{{ menuItem.label }}
 			</div>
 			<div class="wikit-LookupMenu__item__description">
@@ -52,6 +57,13 @@ export default Vue.extend( {
 			type: Array,
 			default: (): [] => [],
 		},
+		/**
+		 * Whether the label of the options should be bold
+		 */
+		boldLabels: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	methods: {
 		onKeyUp( event: KeyboardEvent ): void {
@@ -171,9 +183,13 @@ $base: '.wikit-LookupMenu';
 		&__label {
 			font-family: $wikit-LookupMenu-item-label-font-family;
 			font-size: $wikit-LookupMenu-item-label-font-size;
-			font-weight: $wikit-LookupMenu-item-label-font-weight;
+			font-weight: $wikit-LookupMenu-item-label-font-weight-regular;
 			color: $wikit-LookupMenu-item-label-font-color;
 			line-height: $wikit-LookupMenu-item-label-line-height;
+
+			&--bold {
+				font-weight: $wikit-LookupMenu-item-label-font-weight-bold;
+			}
 		}
 
 		&__description {

diff --git a/vue-components/stories/LookupMenu.stories.ts b/vue-components/stories/LookupMenu.stories.ts
@@ -28,6 +28,15 @@ const vegetableItems = [
 		description: 'plant species Solanum melongena',
 		value: 'Q7540',
 	},
+	{
+		label: 'tomato',
+		value: 'Q20638126',
+	},
+	{
+		label: 'potato',
+		description: '',
+		value: 'Q16587531',
+	},
 	{
 		label: 'broccoli',
 		description: 'edible green plant in the cabbage family',
@@ -45,26 +54,38 @@ const vegetableItems = [
 	},
 ];
 
-export function withItems(): Component {
+export function withItems( args: { boldLabels: boolean } ): Component {
 	return {
 		components: { LookupMenu },
 		computed: {
 			menuItems(): MenuItem[] {
 				return vegetableItems;
 			},
 		},
-
+		props: Object.keys( args ),
 		template: `
 			<div>
 				<LookupMenu
 					:menu-items="menuItems"
+					:bold-labels="boldLabels"
 				>
 				</LookupMenu>
 			</div>
 		`,
 	};
 }
 
+withItems.args = {
+	boldLabels: true,
+};
+withItems.argTypes = {
+	menuItems: {
+		control: {
+			disable: true,
+		},
+	},
+};
+
 export function noItems(): Component {
 	return {
 		components: { LookupMenu },