Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add inline notification component #301

Open
wants to merge 35 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
3f21be1
initial commit
Feb 29, 2024
705f81d
conflict resolved
Feb 29, 2024
4e41a90
resolved
Mar 1, 2024
2ed3ef4
resolved
Mar 1, 2024
d3f6bb3
rename the file
Mar 1, 2024
2e197c4
fixed
Apr 17, 2024
ba00755
export
Apr 18, 2024
2f7f2c6
action
Apr 19, 2024
2cf064f
Merge branch 'main' of https://github.com/IBM/carbon-ui-builder into …
May 10, 2024
b297629
lint
May 10, 2024
e36433d
Merge branch 'main' into notification_clean
Akshat55 May 29, 2024
667488e
changes
Jul 15, 2024
9cb89a2
fix
Jul 15, 2024
3e02a8a
Merge branch 'notification_clean' of https://github.com/maxxyouu/carb…
Jul 15, 2024
5348113
tab space
Jul 15, 2024
1595e4d
export
Jul 15, 2024
57517e4
revision
Jul 22, 2024
943ca1d
Update sdk/react/src/lib/fragment-components/a-notification.tsx
jz5426 Jul 22, 2024
ff66a18
indentation
Jul 22, 2024
e651dd1
Merge branch 'notification_clean' of https://github.com/maxxyouu/carb…
Jul 22, 2024
6d63d6f
styles, indentations, terneries
Jul 24, 2024
b8ab6b5
refactor to only inline notification
Jul 25, 2024
b112726
svg
Jul 25, 2024
9614869
revision
Jul 25, 2024
12e12a5
revision
Jul 25, 2024
67db84f
revision
Jul 25, 2024
601574d
with icon description
Jul 29, 2024
da9eea3
add low contrast and hide close button
Jul 29, 2024
51e9831
Update sdk/react/src/lib/fragment-components/a-inline-notification.tsx
jz5426 Aug 1, 2024
524ad22
revision
Aug 1, 2024
2395394
Merge branch 'notification_clean' of https://github.com/maxxyouu/carb…
Aug 1, 2024
07564e2
bring back new line
Aug 1, 2024
c230b60
Update player/react/src/lib/components/ui-inline-notification.tsx
jz5426 Aug 12, 2024
7c95aae
Update sdk/react/src/lib/fragment-components/a-inline-notification.tsx
jz5426 Aug 12, 2024
06d5121
pr revision
Aug 12, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions player/react/src/lib/components/index.ts
Original file line number Diff line number Diff line change
@@ -11,6 +11,7 @@ import * as contentSwitcher from './ui-content-switcher';
import * as dropdown from './ui-dropdown';
import * as grid from './ui-grid';
import * as numberinput from './ui-number-input';
import * as inlineNotification from './ui-inline-notification';
import * as radio from './ui-radio';
import * as radioGroup from './ui-radio-group';
import * as progressIndicator from './ui-progress-indicator';
@@ -52,6 +53,7 @@ export const allComponents = {
radioGroup,
link,
numberinput,
inlineNotification,
progressIndicator,
row,
searchinput,
80 changes: 80 additions & 0 deletions player/react/src/lib/components/ui-inline-notification.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import React from 'react';
import { CssClasses, SendSignal } from '../types';
import { InlineNotification } from '@carbon/react';

import { commonSlots, slotsDisabled } from '../common-slots';

export interface InlineNotificationState {
id: string;
type: string;
iconDescription?: string;
lowContrast?: boolean;
closeButtonHidden?: boolean;
kind?: string;
subtitle?: string;
title?: string;
caption?: string;
cssClasses?: CssClasses[];
}

export const type = 'inline-notification';

export const signals = ['close'];

export const slots = {
...commonSlots,
...slotsDisabled,
lowContrast: 'boolean',
setLowContrast: (state: InlineNotificationState) => ({
...state,
lowContrast: true
}),
setHighContrast: (state: InlineNotificationState) => ({
...state,
lowContrast: false
}),
toggleContrast: (state: InlineNotificationState) => ({
...state,
lowContrast: !state.lowContrast
}),
closeButtonHidden: 'boolean',
hideCloseButton: (state: InlineNotificationState) => ({
...state,
closeButtonHidden: true
}),
showCloseButton: (state: InlineNotificationState) => ({
...state,
closeButtonHidden: false
}),
toggleCloseButtonVisibility: (state: InlineNotificationState) => ({
...state,
closeButtonHidden: !state.closeButtonHidden
}),
type: 'string',
kind: 'string',
subtitle: 'string',
title: 'string',
caption: 'string'
};

export const UIInlineNotification = ({ state, sendSignal }: {
state: InlineNotificationState;
setState: (state: any) => void;
setGlobalState: (state: any) => void;
sendSignal: SendSignal;
}) => {
if (state.type !== 'inline-notification') {
// eslint-disable-next-line react/jsx-no-useless-fragment
return <></>;
}

return <InlineNotification
className={state.cssClasses?.map((cc: any) => cc.id).join(' ')}
kind={state.kind}
statusIconDescription={state.iconDescription}
hideCloseButton={state.closeButtonHidden}
lowContrast={state.lowContrast}
subtitle={state.subtitle}
title={state.title}
onClose={() => sendSignal(state.id, 'close')} />;
};
4 changes: 4 additions & 0 deletions player/react/src/lib/utils.tsx
Original file line number Diff line number Diff line change
@@ -13,6 +13,7 @@ import { UIContentSwitcher } from './components/ui-content-switcher';
import { UIDropdown } from './components/ui-dropdown';
import { UIExpandableTile } from './components/ui-expandable-tile';
import { UIGrid } from './components/ui-grid';
import { UIInlineNotification } from './components/ui-inline-notification';
import { UILink } from './components/ui-link';
import { UIInlineLoading } from './components/ui-inline-loading';
import { UILoading } from './components/ui-loading';
@@ -244,6 +245,9 @@ export const renderComponents = (
case 'grid':
return <UIGrid key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;

case 'inline-notification':
return <UIInlineNotification key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;

case 'loading':
return <UILoading key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;

16 changes: 16 additions & 0 deletions sdk/react/src/lib/assets/component-icons/inline-notification.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
204 changes: 204 additions & 0 deletions sdk/react/src/lib/fragment-components/a-inline-notification.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
import React from 'react';
import { AComponent, ComponentInfo } from './a-component';
import image from './../assets/component-icons/inline-notification.svg';
import { css, cx } from 'emotion';
import {
Dropdown,
Checkbox,
TextInput,
InlineNotification
} from '@carbon/react';
import {
angularClassNamesFromComponentObj,
nameStringToVariableString,
reactClassNamesFromComponentObj
} from '../helpers/tools';

const preventCheckEventStyle = css`
pointer-events: none;
`;

export const AInlineNotificationSettingsUI = ({ selectedComponent, setComponent }: any) => {
const kind = [
{ id: 'error', text: 'Error' },
{ id: 'info', text: 'Info' },
{ id: 'info-square', text: 'Info square' },
{ id: 'success', text: 'Success' },
{ id: 'warning', text: 'Warning' },
{ id: 'warning-alt', text: 'Alternative warning' }
];

return <>
<Checkbox
labelText='Hide close button'
id='hide-close-button'
checked={selectedComponent.closeButtonHidden}
onChange={(_: any, { checked }: any) => {
setComponent({
...selectedComponent,
closeButtonHidden: checked
});
}} />
<Checkbox
labelText='Low contrast'
id='low-contrast'
checked={selectedComponent.lowContrast}
onChange={(_: any, { checked }: any) => {
setComponent({
...selectedComponent,
lowContrast: checked
});
}} />
<Dropdown
id='notification-kind'
label='Notification kind'
titleText='Notification kind'
items={kind}
selectedItem={kind.find(item => item.id === selectedComponent.kind)}
itemToString={(item: any) => (item ? item.text : '')}
onChange={(event: any) => {
setComponent({
...selectedComponent,
kind: event.selectedItem.id
});
}} />
<TextInput
light
value={selectedComponent.title}
labelText='Title'
onChange={(event: any) => setComponent({
...selectedComponent,
title: event.currentTarget.value
})} />
<TextInput
light
value={selectedComponent.subtitle}
labelText='Subtitle text'
onChange={(event: any) => setComponent({
...selectedComponent,
subtitle: event.currentTarget.value
})} />
</>;
};

export const AInlineNotificationCodeUI = ({ selectedComponent, setComponent }: any) => {
return <TextInput
id='input-name'
value={selectedComponent.codeContext?.name}
labelText='Input name'
onChange={(event: any) => {
setComponent({
...selectedComponent,
codeContext: {
...selectedComponent.codeContext,
name: event.currentTarget.value
}
});
}}
/>;
};

export const AInlineNotification = ({
componentObj,
...rest
}: any) => {
return (
<AComponent
componentObj={componentObj}
rejectDrop={true}
{...rest}>
<InlineNotification
className={cx(preventCheckEventStyle, componentObj.cssClasses?.map((cc: any) => cc.id).join(' '))}
kind={componentObj.kind}
hideCloseButton={componentObj.closeButtonHidden}
lowContrast={componentObj.lowContrast}
subtitle={componentObj.subtitle}
title={componentObj.title} />
</AComponent>
);
};

export const componentInfo: ComponentInfo = {
component: AInlineNotification,
settingsUI: AInlineNotificationSettingsUI,
codeUI: AInlineNotificationCodeUI,
keywords: ['notification', 'inline', 'notify', 'alert'],
name: 'Inline notification',
type: 'inline-notification',
defaultComponentObj: {
type: 'inline-notification',
title: 'Information',
subtitle: 'Something important happened.'
},
image,
codeExport: {
angular: {
latest: {
inputs: ({ json }) => `
@Input() ${nameStringToVariableString(json.codeContext?.name)}NotificationObj: any = {
type: "${json.kind ? json.kind : 'error'}",
title: "${json.title ? json.title : ''}",
message: "${json.subtitle ? json.subtitle : ''}",
lowContrast: ${!!json.lowContrast},
showClose: ${!!json.closeButtonHidden}
};`,
outputs: () => '',
imports: ['NotificationModule', 'ButtonModule'],
code: ({ json }) => `<cds-inline-notification
${angularClassNamesFromComponentObj(json)}
[notificationObj]="${nameStringToVariableString(json.codeContext?.name)}NotificationObj">
</cds-inline-notification>`
},
v10: {
inputs: ({ json }) => `
@Input() ${nameStringToVariableString(json.codeContext?.name)}NotificationObj: any = {
type: "${json.kind ? json.kind : 'error'}",
title: "${json.title ? json.title : ''}",
message: "${json.subtitle ? json.subtitle : ''}",
lowContrast: ${!!json.lowContrast},
showClose: ${!!json.closeButtonHidden}
};`,
outputs: () => '',
imports: ['NotificationModule', 'ButtonModule'],
code: ({ json }) => `<ibm-notification
${angularClassNamesFromComponentObj(json)}
[notificationObj]="${nameStringToVariableString(json.codeContext?.name)}NotificationObj">
</ibm-notification>`
}
},
react: {
latest: {
imports: ['InlineNotification'],
code: ({ json }) => `<InlineNotification
kind="${json.kind ? json.kind : 'error'}"
hideCloseButton={${!!json.closeButtonHidden}}
lowContrast={${!!json.lowContrast}}
${json.subtitle ? `subtitle="${json.subtitle}"`: ''}
title="${json.title ? json.title : ''}"
onClose={(selectedItem) => handleInputChange({
target: {
name: "${nameStringToVariableString(json.codeContext?.name)}",
value: selectedItem
}
})}
${reactClassNamesFromComponentObj(json)} />`
},
v10: {
imports: ['InlineNotification'],
code: ({ json }) => `<InlineNotification
kind="${json.kind ? json.kind : 'error'}"
hideCloseButton={${!!json.closeButtonHidden}}
lowContrast={${!!json.lowContrast}}
${json.subtitle ? `subtitle="${json.subtitle}"`: ''}
title="${json.title ? json.title : ''}"
onClose={(selectedItem) => handleInputChange({
target: {
name: "${nameStringToVariableString(json.codeContext?.name)}",
value: selectedItem
}
})}
${reactClassNamesFromComponentObj(json)} />`
}
}
}
};
3 changes: 3 additions & 0 deletions sdk/react/src/lib/fragment-components/index.ts
Original file line number Diff line number Diff line change
@@ -11,6 +11,7 @@ import * as contentSwitcher from './a-content-switcher';
import * as dropdown from './a-dropdown';
import * as fragment from './a-fragment';
import * as grid from './a-grid';
import * as inlineNotification from './a-inline-notification';
import * as numberinput from './a-numberinput';
import * as radio from './a-radio';
import * as radioGroup from './a-radio-group';
@@ -52,6 +53,7 @@ export { AGrid, AGridCodeUI, AGridSettingsUI } from './a-grid';
export { ALoading, ALoadingCodeUI, ALoadingSettingsUI } from './a-loading';
export { ALink, ALinkSettingsUI, ALinkCodeUI } from './a-link';
export { AInlineLoading, AInlineLoadingCodeUI, AInlineLoadingSettingsUI } from './a-inline-loading';
export { AInlineNotification, AInlineNotificationSettingsUI, AInlineNotificationCodeUI } from './a-inline-notification';
export { ANumberInput, ANumberInputSettingsUI, ANumberInputCodeUI } from './a-numberinput';
export { AProgressIndicator, AProgressIndicatorSettingsUI, AProgressIndicatorCodeUI } from './a-progress-indicator';
export { ARow, ARowCodeUI, ARowSettingsUI } from './a-row';
@@ -88,6 +90,7 @@ export const allComponents = {
dropdown,
fragment,
grid,
inlineNotification,
loading,
inlineLoading,
radio,
Loading