diff --git a/src/stories/Library/input-label/InputLabel.stories.tsx b/src/stories/Library/input-label/InputLabel.stories.tsx index 6d4fbc30b..e6802fbd7 100644 --- a/src/stories/Library/input-label/InputLabel.stories.tsx +++ b/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 = (args) => ( ); export const InputLabel = Template.bind({}); + +export const RequiredInputLabel = Template.bind({}); + +RequiredInputLabel.args = { + text: "Her er en required label", + required: true, +}; diff --git a/src/stories/Library/input-label/InputLabel.tsx b/src/stories/Library/input-label/InputLabel.tsx index 2b5b28e96..b63d6e006 100644 --- a/src/stories/Library/input-label/InputLabel.tsx +++ b/src/stories/Library/input-label/InputLabel.tsx @@ -1,7 +1,9 @@ export type InputLabelProps = { text: string; + required?: boolean; }; -export const InputLabel: React.FC = ({ text }) => { - return ; +export const InputLabel: React.FC = ({ text, required }) => { + const labelClass = `input-label ${required ? "input-label--required" : ""}`; + return ; }; diff --git a/src/stories/Library/input-label/input-label.scss b/src/stories/Library/input-label/input-label.scss index 0f1f8d433..61e515c30 100644 --- a/src/stories/Library/input-label/input-label.scss +++ b/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: " *"; +}