Allow custom classes for authoring header (#885)

* Allow custom classes for authoring header * Fix lint * 3.1.25
superdesk · Oct 29, 2024 · 12acd35 · 12acd35
1 parent 8bcb31b
commit 12acd35
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 18 deletions.
diff --git a/app-typescript/components/Layouts/AuthoringInnerHeader.tsx b/app-typescript/components/Layouts/AuthoringInnerHeader.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Icon } from '../Icon';
+import {Icon} from '../Icon';
 
 interface IProps {
     children?: React.ReactNode;
     collapsed?: boolean;
-    headerPadding?: 'small' | 'medium' | 'large';
+    headerStyles?: string;
 }
 interface IState {
     collapsed: boolean;
@@ -21,17 +21,21 @@ export class AuthoringInnerHeader extends React.PureComponent<IProps, IState> {
     }
 
     render() {
-        let classes = classNames('sd-editor-content__authoring-header', {
-            'authoring-header--collapsed': this.state.collapsed,
-            [`authoring-header--padding-${this.props.headerPadding}`]: this.props.headerPadding,
-        });
+        const classes = classNames(
+            'sd-editor-content__authoring-header',
+            {
+                'authoring-header--collapsed': this.state.collapsed,
+                [`${this.props.headerStyles}`]: this.props.headerStyles,
+            },
+        );
+
         return (
             <header className={classes}>
                 <div className="authoring-header__holder">
                     {this.props.children}
                 </div>
                 <button className="authoring-header__toggle"
-                    onClick={() => this.setState({ collapsed: !this.state.collapsed })}>
+                    onClick={() => this.setState({collapsed: !this.state.collapsed})}>
                     <Icon name="chevron-up-thin" />
                 </button>
             </header>

diff --git a/app-typescript/components/Layouts/AuthoringMain.tsx b/app-typescript/components/Layouts/AuthoringMain.tsx
@@ -14,9 +14,9 @@ interface IProps {
     toolBar?: React.ReactNode;
     authoringMain?: React.ReactNode;
     authoringHeader?: React.ReactNode;
+    headerStyles?: string;
     authoringBookmarks?: React.ReactNode;
     headerCollapsed?: boolean;
-    headerPadding?: 'small' | 'medium' | 'large';
     toolbarCustom?: boolean;
     noPaddingForContent?: boolean;
 }
@@ -33,10 +33,11 @@ export class AuthoringMain extends React.PureComponent<IProps> {
                 <AuthoringMainContent>
                     {this.props.authoringHeader && (
                         <AuthoringInnerHeader
-                        headerPadding={this.props.headerPadding}
-                        collapsed={this.props.headerCollapsed}>
+                            headerStyles={this.props.headerStyles}
+                            collapsed={this.props.headerCollapsed}
+                        >
                             {this.props.authoringHeader}
-                    </AuthoringInnerHeader>
+                        </AuthoringInnerHeader>
                     )}
                     {this.props.authoringBookmarks && (
                         <AuthorinInnerSideBar>

diff --git a/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx b/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx
@@ -122,7 +122,7 @@ export class EditorTest extends React.Component<IProps, IState> {
                 )}
                 main={(
                     <Layout.AuthoringMain
-                        headerPadding='medium'
+                        headerStyles='authoring-header--padding-medium'
                         toolBar={(
                             <React.Fragment>
                                 <div className="sd-editor-toolbar__content">

diff --git a/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx b/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx
@@ -134,7 +134,7 @@ export class Editor extends React.Component<{}, IEditor> {
                 )}
                 main={(
                     <Layout.AuthoringMain
-                        headerPadding='medium'
+                        headerStyles='authoring-header--padding-medium'
                         toolBar={(
                             <React.Fragment>
                                 <div className="sd-editor-toolbar__content">

diff --git a/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx b/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx
@@ -147,7 +147,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                 <Layout.HeaderPanel>
                     <SubNav>
                         <Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right' appendToBody={true}>
-                            <button 
+                            <button
                                 className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
                                 onClick={this.toggleExpand}
                             >
@@ -175,7 +175,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
 
                 <Layout.MainPanel padding='none'>
                     <Layout.AuthoringMain
-                        headerPadding='medium'
+                        headerStyles='authoring-header--padding-medium'
                         toolBar={(
                             <React.Fragment>
                                 <div className="sd-editor-toolbar__content">
@@ -341,7 +341,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                             <Layout.AuthoringFrame
                                 main={
                                     <Layout.AuthoringMain
-                                        headerPadding='medium'
+                                        headerStyles='authoring-header--padding-medium'
                                         toolbarCustom={true}
                                         headerCollapsed={true}
                                         toolBar={(

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.1.24",
+  "version": "3.1.25",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",