Merge pull request #681 from danskernesdigitalebibliotek/DDFLSBP-659-…

…add-visual-indicators-on-required-fields

DDFLSBP-659 - Add visual indicators on required fields

src/stories/Library/input-label/InputLabel.stories.tsx

@@ -11,6 +11,9 @@ export default {
     text: {
       defaultValue: "Her er en label",
     },
+    required: {
+      defaultValue: false,
+    },
   },
   parameters: {
     layout: "padded",
@@ -22,3 +25,10 @@ const Template: ComponentStory<DropdownProps> = (args) => (
 );
 
 export const InputLabel = Template.bind({});
+
+export const RequiredInputLabel = Template.bind({});
+
+RequiredInputLabel.args = {
+  text: "Her er en required label",
+  required: true,
+};

src/stories/Library/input-label/InputLabel.tsx

@@ -1,7 +1,9 @@
 export type InputLabelProps = {
   text: string;
+  required?: boolean;
 };
 
-export const InputLabel: React.FC<InputLabelProps> = ({ text }) => {
-  return <label className="input-label">{text}</label>;
+export const InputLabel: React.FC<InputLabelProps> = ({ text, required }) => {
+  const labelClass = `input-label ${required ? "input-label--required" : ""}`;
+  return <label className={labelClass}>{text}</label>;
 };

src/stories/Library/input-label/input-label.scss

@@ -5,3 +5,7 @@
   margin-bottom: $s-sm;
   padding-top: $s-xs;
 }
+
+.input-label--required::after {
+  content: " *";
+}