feat: Initial clean release of CHM

packages/app-desktop/gui/Sidebar/listItemComponents/ExpandIcon.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { _ } from '@joplin/lib/locale';
+
+interface ExpandIconProps {
+	isExpanded: boolean;
+	isVisible: boolean;
+}
+
+const ExpandIcon: React.FC<ExpandIconProps> = props => {
+	const classNames = ['sidebar-expand-icon'];
+	if (props.isVisible) classNames.push('-visible');
+	classNames.push(props.isExpanded ? 'fas fa-caret-down' : 'fas fa-caret-right');
+
+	// Referencing the name of the item we expand/collapse is both good for accessibility
+	// and makes writing tests easier.
+	const getLabel = () => {
+		if (!props.isVisible) {
+			return undefined;
+		}
+		if (props.isExpanded) {
+			return _('Expanded');
+		}
+		return _('Collapsed');
+	};
+	const label = getLabel();
+	return <i
+		className={classNames.join(' ')}
+		aria-hidden={!props.isVisible}
+		aria-label={label}
+		role='img'
+	></i>;
+};
+
+export default ExpandIcon;