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 = args => { + return ; +}; + +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 ( +