From 040faba6f826e98f3e979a1d87f00c13b941f0ca Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Tue, 7 Mar 2023 17:28:29 +0200
Subject: [PATCH] feat(ui-components): add ControlLabel component (#47219)

---
 .../control-label/control-label.stories.tsx   | 19 ++++++++++++++++++
 .../src/control-label/control-label.tsx       | 20 +++++++++++++++++++
 .../ui-components/src/control-label/index.ts  |  2 ++
 .../ui-components/src/control-label/types.ts  |  7 +++++++
 4 files changed, 48 insertions(+)
 create mode 100644 tools/ui-components/src/control-label/control-label.stories.tsx
 create mode 100644 tools/ui-components/src/control-label/control-label.tsx
 create mode 100644 tools/ui-components/src/control-label/index.ts
 create mode 100644 tools/ui-components/src/control-label/types.ts

diff --git a/tools/ui-components/src/control-label/control-label.stories.tsx b/tools/ui-components/src/control-label/control-label.stories.tsx
new file mode 100644
index 00000000000..a77a5616743
--- /dev/null
+++ b/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;
diff --git a/tools/ui-components/src/control-label/control-label.tsx b/tools/ui-components/src/control-label/control-label.tsx
new file mode 100644
index 00000000000..a21d6834ee7
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/tools/ui-components/src/control-label/index.ts b/tools/ui-components/src/control-label/index.ts
new file mode 100644
index 00000000000..21f5d863d05
--- /dev/null
+++ b/tools/ui-components/src/control-label/index.ts
@@ -0,0 +1,2 @@
+export { ControlLabel } from './control-label';
+export type { ControlLabelProps } from './types';
diff --git a/tools/ui-components/src/control-label/types.ts b/tools/ui-components/src/control-label/types.ts
new file mode 100644
index 00000000000..425a8b06c47
--- /dev/null
+++ b/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;
+}