Release 0.0.110

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surfnet/sds",
-  "version": "0.0.109",
+  "version": "0.0.110",
   "description": "SURF Design System for React",
   "main": "cjs/index.js",
   "module": "esm/index.js",

src/components/EmailInput/EmailInput.stories.tsx

@@ -27,7 +27,8 @@ const Template: StoryFn<typeof EmailInput> = (args) => <EmailInput {...args} />;
 export const DefaultTemplate = Template.bind({});
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 DefaultTemplate.args = {
-    error: false
+    error: false,
+    required: true
 };
 
 export const ErrorTemplate = Template.bind({});

src/components/EmailInput/EmailInput.tsx

@@ -17,7 +17,8 @@ export interface EmailInputProps {
     inviteesPlaceholder?: string,
     pinnedEmails?: Array<string>,
     error?: boolean,
-    validateExistingMails?: boolean
+    validateExistingMails?: boolean,
+    required?: boolean
 }
 
 const EmailInput = (props: EmailInputProps) => {
@@ -106,10 +107,10 @@ const EmailInput = (props: EmailInputProps) => {
         setEmailErrors([]);
         props.removeMail(mail)(e);
     }
-
+    const required = props.required || false;
     return (
         <div className={`sds--email-input ${props.error ? "error" : ""}`}>
-            <label htmlFor={props.name}>{props.name}
+            <label htmlFor={props.name}>{props.name}{required && <sup className="required">*</sup>}
                 {props.inviteesMessagesTooltip && <Tooltip
                     tip={props.inviteesMessagesTooltip}/>}
             </label>

src/components/RadioOptions/RadioOptions.stories.tsx

@@ -28,7 +28,8 @@ MultipleOptions.args = {
     tooltip: "Lorum Ipsum",
     isMultiple: true,
     labels: ["option1", "option2", "option3", "option4"],
-    labelResolver: (label: string) => label.toUpperCase()
+    labelResolver: (label: string) => label.toUpperCase(),
+    required: true
 };
 
 export const MultipleOptionsColumn = Template.bind({});

src/components/RadioOptions/RadioOptions.tsx

@@ -5,19 +5,20 @@ import Tooltip from "../Tooltip/index";
 import RadioOptionsOrientation from "./RadioOptionsOrientation";
 
 export interface RadioOptionsProps {
-    trueLabel: string;
-    falseLabel: string;
-    label: string;
-    name: string;
-    onChange: ChangeEventHandler;
-    value: boolean | string | null;
-    tooltip?: string;
-    disabled?: boolean;
-    isMultiple?: boolean;
-    reverse?: boolean;
-    labels?: Array<string>;
-    labelResolver?: Function;
-    orientation?: RadioOptionsOrientation;
+    trueLabel: string,
+    falseLabel: string,
+    label: string,
+    name: string,
+    onChange: ChangeEventHandler,
+    value: boolean | string | null,
+    tooltip?: string,
+    disabled?: boolean,
+    isMultiple?: boolean,
+    reverse?: boolean,
+    labels?: Array<string>,
+    labelResolver?: Function,
+    orientation?: RadioOptionsOrientation,
+     required?: boolean
 }
 
 const RadioOptions = (props: RadioOptionsProps) => {
@@ -32,10 +33,11 @@ const RadioOptions = (props: RadioOptionsProps) => {
     const orientation = props.orientation || RadioOptionsOrientation.row;
     const reverse = props.reverse || false;
     const labels = isMultiple ? (props.labels && props.labels) : reverse ? [props.trueLabel, props.falseLabel] : [props.falseLabel, props.trueLabel];
+     const required = props.required || false;
     return (
         <div className="sds--radio-options">
             <label htmlFor={`${props.name}`} className={"sds--tooltip-parent"}>
-                <span>{props.label}</span>
+                <span>{props.label}{required && <sup className="required">*</sup>}</span>
                 {props.tooltip && <Tooltip tip={props.tooltip}/>}
             </label>
             <div className={`sds--text-field-container ${orientation}`}>