Merge pull request #62 from ecmwf-projects/COPDS-1398-blank-widget-ne…

…eded

Copds 1398 blank widget needed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecmwf-projects/cads-ui-library",
-  "version": "8.2.2",
+  "version": "8.2.3",
   "description": "Common UI kit library",
   "repository": {
     "type": "git",

src/index.ts

@@ -29,6 +29,7 @@ export { StringListWidget } from './widgets/StringListWidget'
 export { StringChoiceWidget } from './widgets/StringChoiceWidget'
 export { DateRangeWidget } from './widgets/DateRangeWidget'
 export { FreeformInputWidget } from './widgets/FreeformInputWidget'
+export { BlankWidget } from './widgets/BlankWidget'
 
 export { StringListArrayWidget } from './widgets/StringListArrayWidget'
 /**

src/widgets/BlankWidget.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+import { Widget, WidgetHeader, WidgetTitle } from './Widget'
+
+/**
+ * BlankWidget.
+ * Widget to display a block of any element.
+ */
+const BlankWidget = ({
+  name,
+  label,
+  children,
+  labelAriaHidden = true
+}: {
+  name?: string
+  label?: string
+  children: React.ReactNode
+  labelAriaHidden?: boolean
+}) => {
+  return (
+    <Widget data-stylizable='widget'>
+      {label && (
+        <WidgetHeader>
+          <WidgetTitle
+            data-stylizable='widget-title'
+            htmlFor={name}
+            aria-hidden={labelAriaHidden}
+          >
+            {label}
+          </WidgetTitle>
+        </WidgetHeader>
+      )}
+      <div data-stylizable='widget blank-widget-text'>{children}</div>
+    </Widget>
+  )
+}
+
+export { BlankWidget }