superdesk-ui-framework 6.0.1 → 6.0.3

package/app-typescript/components/DatePicker.tsx

@@ -337,6 +337,13 @@ export class DatePickerISO extends React.PureComponent<IDatePickerISO> {
     }
 }
 
+function getOptionLabel(options: Array<{id: string; label?: string}>, id: string | null | undefined): string {
+    if (id == null) {
+        return '';
+    }
+    return options.find((option) => option.id === id)?.label ?? id;
+}
+
 const MonthNavigator = ({
     value,
     options,
@@ -346,7 +353,7 @@ const MonthNavigator = ({
         kind="synchronous"
         value={[value]}
         getOptions={() => options.map((option) => ({value: option.id}))}
-        getLabel={(option) => options[parseInt(option, 10)].label}
+        getLabel={(optionId) => getOptionLabel(options, optionId)}
         getId={(option) => option}
         onChange={(selected) => {
             onChange(selected[0]);
@@ -355,7 +362,7 @@ const MonthNavigator = ({
         labelHidden
         valueTemplate={(item) => (
             <div className="sd-datepicker__navigator-value sd-datepicker__navigator-month">
-                <div>{options[parseInt(item, 10)].label}</div>
+                <div>{getOptionLabel(options, item)}</div>
                 <Icon name="chevron-down-thin" />
             </div>
         )}

package/app-typescript/components/StateLabel.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import {Label} from './Label';
+
+type StateType =
+    | 'draft'
+    | 'ingested'
+    | 'routed'
+    | 'fetched'
+    | 'submitted'
+    | 'in_progress'
+    | 'published'
+    | 'spiked'
+    | 'scheduled'
+    | 'corrected'
+    | 'killed'
+    | 'recalled'
+    | 'unpublished'
+    | 'correction'
+    | 'being_corrected'
+    | string;
+
+interface IStateColorConfig {
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
+    color?: string;
+    style?: 'filled' | 'hollow';
+}
+
+const DEFAULT_STATE_COLOR_MAP: Record<string, IStateColorConfig> = {
+    draft: {type: 'default', style: 'hollow'},
+    ingested: {type: 'primary', style: 'hollow'},
+    routed: {type: 'primary', style: 'hollow'},
+    fetched: {type: 'primary', style: 'hollow'},
+    submitted: {type: 'warning', style: 'hollow'},
+    in_progress: {type: 'warning', style: 'hollow'},
+    published: {type: 'success', style: 'hollow'},
+    spiked: {type: 'alert', style: 'hollow'},
+    recalled: {type: 'alert', style: 'hollow'},
+    killed: {type: 'alert', style: 'hollow'},
+    scheduled: {type: 'highlight', style: 'hollow'},
+    corrected: {type: 'sd-green', style: 'hollow'},
+    correction: {color: 'pink--500', style: 'filled'},
+    being_corrected: {color: 'pink--500', style: 'hollow'},
+    unpublished: {type: 'alert', style: 'hollow'},
+};
+
+interface IProps {
+    state: StateType;
+    text: string;
+    onClick?: () => void;
+    color?: string;
+    noTransform?: boolean;
+    size?: 'small' | 'normal' | 'large';
+    mappingOverride?: Partial<Record<StateType, IStateColorConfig>>;
+}
+
+export class StateLabel extends React.PureComponent<IProps> {
+    private getColorConfig(state: StateType): IStateColorConfig {
+        const {mappingOverride} = this.props;
+        const override = mappingOverride?.[state];
+        const defaultConfig = DEFAULT_STATE_COLOR_MAP[state] || {type: 'default'};
+
+        return override ? {...defaultConfig, ...override} : defaultConfig;
+    }
+
+    render() {
+        const {state, text, onClick, color, noTransform, size} = this.props;
+        const colorConfig = this.getColorConfig(state);
+
+        return (
+            <Label
+                text={text}
+                type={color ? undefined : colorConfig.type}
+                color={color || colorConfig.color}
+                style={colorConfig.style || 'hollow'}
+                onClick={onClick}
+                noTransform={noTransform}
+                size={size}
+            />
+        );
+    }
+}

package/app-typescript/index.ts

@@ -11,6 +11,7 @@ export {SelectWithTemplate} from './components/SelectWithTemplate';
 export {WithPagination} from './components/WithPagination';
 export {Popover} from './components/Popover';
 export {Label} from './components/Label';
+export {StateLabel} from './components/StateLabel';
 export {Card} from './components/Card';
 export {Badge} from './components/Badge';
 export {Alert} from './components/Alert';

package/dist/components/Index.tsx

@@ -11,6 +11,7 @@ import AutocompleteDoc from './Autocomplete';
 import SelectsDoc from './Selects';
 import ButtonsDoc from './Buttons';
 import LabelsDoc from './Labels';
+import StateLabelDoc from './StateLabel';
 import ButtonGroupsDoc from './ButtonGroups';
 import BadgesDoc from './Badges';
 import AlertDoc from './Alerts';
@@ -126,6 +127,10 @@ const pages: IPages = {
                 name: 'Labels',
                 component: LabelsDoc,
             },
+            'state-label': {
+                name: 'State Labels',
+                component: StateLabelDoc,
+            },
             'icon-labels': {
                 name: 'Icon Labels',
                 component: IconLabelDoc,

package/dist/components/StateLabel.tsx

@@ -0,0 +1,201 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import {StateLabel, Prop, PropsList} from '../../../app-typescript';
+
+export default class StateLabelDoc extends React.Component {
+    render() {
+        return (
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">State Label</h2>
+                <Markup.ReactMarkupCodePreview>
+                    {`
+                    <StateLabel state="published" text="Published" />
+                `}
+                </Markup.ReactMarkupCodePreview>
+                <p className="docs-page__paragraph">
+                    Display item states with predefined semantic colors. Currently supports 15 states with automatic
+                    color mapping.
+                </p>
+
+                <h3 className="docs-page__h3">All States</h3>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className="docs-page__content-row">
+                            <div style={{display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center'}}>
+                                <StateLabel state="draft" text="Draft" />
+                                <StateLabel state="ingested" text="Ingested" />
+                                <StateLabel state="routed" text="Routed" />
+                                <StateLabel state="fetched" text="Fetched" />
+                                <StateLabel state="submitted" text="Submitted" />
+                                <StateLabel state="in_progress" text="In Progress" />
+                                <StateLabel state="published" text="Published" />
+                                <StateLabel state="spiked" text="Spiked" />
+                                <StateLabel state="recalled" text="Recalled" />
+                                <StateLabel state="killed" text="Killed" />
+                                <StateLabel state="scheduled" text="Scheduled" />
+                                <StateLabel state="corrected" text="Corrected" />
+                                <StateLabel state="correction" text="Correction" />
+                                <StateLabel state="being_corrected" text="Being Corrected" />
+                                <StateLabel state="unpublished" text="Unpublished" />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>
+                        {`
+                        <StateLabel state="draft" text="Draft" />
+                        <StateLabel state="ingested" text="Ingested" />
+                        <StateLabel state="routed" text="Routed" />
+                        <StateLabel state="fetched" text="Fetched" />
+                        <StateLabel state="submitted" text="Submitted" />
+                        <StateLabel state="in_progress" text="In Progress" />
+                        <StateLabel state="published" text="Published" />
+                        <StateLabel state="spiked" text="Spiked" />
+                        <StateLabel state="recalled" text="Recalled" />
+                        <StateLabel state="killed" text="Killed" />
+                        <StateLabel state="scheduled" text="Scheduled" />
+                        <StateLabel state="corrected" text="Corrected" />
+                        <StateLabel state="correction" text="Correction" />
+                        <StateLabel state="being_corrected" text="Being Corrected" />
+                        <StateLabel state="unpublished" text="Unpublished" />
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">With Click Handler</h3>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className="docs-page__content-row">
+                            <StateLabel
+                                state="being_corrected"
+                                text="Click me to open article"
+                                onClick={() => alert('Article opened!')}
+                            />
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>
+                        {`
+                        <StateLabel
+                            state="being_corrected"
+                            text="Click me to open article"
+                            onClick={() => alert('Article opened!')}
+                        />
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Different Sizes</h3>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className="docs-page__content-row">
+                            <div style={{display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center'}}>
+                                <StateLabel state="published" text="Small" size="small" />
+                                <StateLabel state="published" text="Normal" size="normal" />
+                                <StateLabel state="published" text="Large" size="large" />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>
+                        {`
+                        <StateLabel state="published" text="Small" size="small" />
+                        <StateLabel state="published" text="Normal" size="normal" />
+                        <StateLabel state="published" text="Large" size="large" />
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Custom State Mapping</h3>
+                <p className="docs-page__paragraph">
+                    Override default state-to-color mapping or define custom states with their own colors and styles.
+                </p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className="docs-page__content-row">
+                            <div style={{display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center'}}>
+                                <StateLabel state="draft" text="Draft (Default)" />
+                                <StateLabel
+                                    state="draft"
+                                    text="Draft (Custom Alert)"
+                                    mappingOverride={{
+                                        draft: {type: 'alert', style: 'hollow'},
+                                    }}
+                                />
+                                <StateLabel
+                                    state="archived"
+                                    text="Archived"
+                                    mappingOverride={{
+                                        archived: {color: 'gray--500', style: 'hollow'},
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>
+                        {`
+                        {/* Predefined state with default mapping */}
+                        <StateLabel state="draft" text="Draft (Default)" />
+
+                        {/* Override predefined state mapping */}
+                        <StateLabel
+                            state="draft"
+                            text="Draft (Custom Alert)"
+                            mappingOverride={{
+                                draft: {type: 'alert', style: 'hollow'}
+                            }}
+                        />
+
+                        {/* Custom state with mapping */}
+                        <StateLabel
+                            state="archived"
+                            text="Archived"
+                            mappingOverride={{
+                                archived: {color: 'gray--500', style: 'hollow'}
+                            }}
+                        />
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop
+                        name="state"
+                        isRequired={true}
+                        type="StateType"
+                        default="/"
+                        description="The item state value. One of 15 predefined states (draft, published, etc.) or any custom state string"
+                    />
+                    <Prop name="text" isRequired={true} type="string" default="/" description="Label text to display" />
+                    <Prop name="onClick" isRequired={false} type="() => void" default="/" description="Click handler" />
+                    <Prop
+                        name="color"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Custom color override (e.g. red--500); NOTE: When defined, it overrides the state's predefined color"
+                    />
+                    <Prop
+                        name="size"
+                        isRequired={false}
+                        type="small | normal | large"
+                        default="normal"
+                        description="Label size"
+                    />
+                    <Prop
+                        name="noTransform"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Disable uppercase text transformation"
+                    />
+                    <Prop
+                        name="mappingOverride"
+                        isRequired={false}
+                        type="Partial<Record<StateType, IStateColorConfig>>"
+                        default="undefined"
+                        description="Override or define state-to-color mapping. Works with predefined and custom states"
+                    />
+                </PropsList>
+            </section>
+        );
+    }
+}