feat(ui-components): add ControlLabel component (#47219)

tools/ui-components/src/control-label/control-label.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import { ControlLabel, ControlLabelProps } from '.';
+
+const story = {
+  title: 'Example/ControlLabel',
+  component: ControlLabel
+};
+
+const Template: Story<ControlLabelProps> = args => {
+  return <ControlLabel {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  // default props go here
+};
+
+export default story;

tools/ui-components/src/control-label/control-label.tsx

@@ -0,0 +1,20 @@
+import React, { useContext } from 'react';
+import { FormContext } from '../form-context';
+
+import { ControlLabelProps } from './types';
+
+export const ControlLabel = ({
+  htmlFor,
+  srOnly,
+  ...props
+}: ControlLabelProps) => {
+  const { controlId } = useContext(FormContext);
+  const screenOnlyClass = srOnly ? 'sr-only ' : '';
+  return (
+    <label
+      className={screenOnlyClass}
+      htmlFor={htmlFor || controlId}
+      {...props}
+    />
+  );
+};

tools/ui-components/src/control-label/index.ts

@@ -0,0 +1,2 @@
+export { ControlLabel } from './control-label';
+export type { ControlLabelProps } from './types';

tools/ui-components/src/control-label/types.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export interface ControlLabelProps
+  extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  htmlFor?: string;
+  srOnly?: boolean;
+}