CC-32312 Introduced a new Button Action table column type and a new Confirm action.

_data/sidebars/scos_dev_sidebar.yml

@@ -1737,6 +1737,8 @@ entries:
               nested:
                 - title: "Autocomplete"
                   url: /docs/scos/dev/front-end-development/marketplace/table-design/table-column-type-extension/table-column-type-autocomplete.html
+                - title: "Button Action"
+                  url: /docs/scos/dev/front-end-development/marketplace/table-design/table-column-type-extension/table-column-type-button-action.html
                 - title: "Chip"
                   url: /docs/scos/dev/front-end-development/marketplace/table-design/table-column-type-extension/table-column-type-chip.html
                 - title: "Date"
@@ -1799,6 +1801,8 @@ entries:
               nested:
                 - title: "Close Drawer"
                   url: /docs/scos/dev/front-end-development/marketplace/ui-components-library/actions/actions-close-drawer.html
+                - title: "Confirmation"
+                  url: /docs/scos/dev/front-end-development/marketplace/ui-components-library/actions/actions-confirmation.html
                 - title: "Drawer"
                   url: /docs/scos/dev/front-end-development/marketplace/ui-components-library/actions/actions-drawer.html
                 - title: "HTTP"

docs/scos/dev/front-end-development/202204.0/marketplace/table-design/table-column-type-extension/table-column-type-button-action.md

@@ -0,0 +1,106 @@
+---
+title: Table Column Type Button Action
+description: This document provides details about the Table Column Type Button Action in the Components Library.
+template: concept-topic-template
+related:
+  - title: Table Column Type extension
+    link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-extension.html
+  - title: Table Column Type Autocomplete
+    link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-autocomplete.html
+  - title: Table Column Type Chip
+    link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-chip.html
+  - title: Table Column Type Date
+    link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-date.html
+  - title: Table Column Type Dynamic
+    link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-dynamic.html
+  - title: Table Column Type Image
+    link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-image.html
+  - title: Table Column Type Input
+    link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-input.html
+  - title: Table Column Type List
+    link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-list.html
+  - title: Table Column Type Select
+    link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-select.html
+  - title: Table Column Type Text
+    link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-text.html
+---
+
+Table Column Button Action is an Angular component in the components library that renders button using the `@spryker/button.action` component.
+
+
+## Usage
+
+Example of usage in the `@spryker/table` config:
+
+```html
+<spy-table
+    [config]="{
+        ...,
+        columns: [
+            ...,
+            {
+                id: 'columnId',
+                title: 'Column Title',
+                type: 'button-action',
+                typeOptions: {
+                    text: 'text',
+                    action: {
+                        type: 'http',
+                        url: '/url',
+                    },
+                },
+            },
+            ...,
+        ],
+    }"
+>
+</spy-table>
+```
+
+## Component registration
+
+Register the component:
+
+```ts
+declare module '@spryker/table' {
+    interface TableColumnTypeRegistry {
+        'button-action': TableColumnButtonActionConfig;
+    }
+}
+
+@NgModule({
+    imports: [
+        TableModule.forRoot(),
+        TableModule.withColumnComponents({
+            'button-action': TableColumnButtonActionComponent,
+        }),
+        TableColumnButtonActionModule,
+    ],
+})
+export class RootModule {}
+```
+
+## Interfaces
+
+Table Column Button Action interfaces:
+
+```ts
+export type ButtonAttributes = Record<string, string>;
+export type ActionType = RegistryType<ActionsRegistry>;
+
+interface TableColumnButtonAction extends ActionConfig {
+    type: ActionType;
+    [k: string]: unknown;
+}
+
+interface TableColumnButtonActionConfig {
+    /** Bound to the @spryker/button-action inputs */
+    text?: string;
+    action?: TableColumnButtonAction;
+    actionContext?: unknown;
+    variant?: ButtonVariant; // 'primary' - by default
+    shape?: ButtonShape; // 'default' - by default
+    size?: ButtonSize; // 'md' - by default
+    attrs?: ButtonAttributes;
+}
+```

docs/scos/dev/front-end-development/202204.0/marketplace/ui-components-library/actions/actions-confirmation.md

@@ -0,0 +1,106 @@
+---
+title: Actions Confirmation
+description: This document provides details about the Actions Confirmation service in the Components Library.
+template: concept-topic-template
+related:
+  - title: Actions
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/actions/ui-components-library-actions.html
+  - title: Actions Close Drawer
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/actions/actions-close-drawer.html
+  - title: Actions Drawer
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/actions/actions-drawer.html
+  - title: Actions HTTP
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/actions/actions-http.html
+  - title: Actions Notification
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/actions/actions-notification.html
+  - title: Actions Redirect
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/actions/actions-redirect.html
+  - title: Actions Refresh Drawer
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/actions/actions-refresh-drawer.html
+  - title: Actions Refresh Parent Table
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/actions/actions-refresh-parent-table.html
+  - title: Actions Refresh Table
+    link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/actions/actions-refresh-table.html
+
+---
+
+Actions Confirmation is an angular Service in the components library that calls another action with a confirmation via the Modal component.
+
+
+## Usage
+
+Service configuration:
+
+| ATTRIBUTE | DESCRIPTION |
+| - | - |
+| `type` | An action type. |
+| `action` | Registered action configuration. |
+| `modal` | Modal configuration based on the `ConfirmModalStrategyOptions` interface of the Modal component.  |
+
+
+Usage example:
+
+```html
+<spy-button-action
+    [action]="{
+        type: 'confirmation',
+        action: {
+            type: 'redirect',
+            url: '/url',
+        },
+        modal: {
+            description: 'Redirect to /url',
+        },
+    }"
+>
+</spy-button-action>
+```
+
+## Service registration
+
+Register the service:
+
+```ts
+declare module '@spryker/actions' {
+    interface ActionsRegistry {
+        confirmation: ConfirmationActionHandlerService,
+    }
+}
+
+@NgModule({
+    imports: [
+        ActionsModule.withActions({
+            confirmation: ConfirmationActionHandlerService,
+        }),
+    ],
+})
+export class RootModule {}
+```
+
+## Interfaces
+
+Actions Confirmation interfaces:
+
+```ts
+export interface ConfirmationActionConfig extends ActionConfig {
+    action: ActionConfig;
+    modal?: ConfirmModalStrategyOptions;
+}
+
+export interface ConfirmModalStrategyOptions extends ConfirmModalData {}
+
+export interface ConfirmModalData {
+    title?: string | TemplateRef<ModalTemplateContext<AnyModal>>;
+    description?: string | TemplateRef<ModalTemplateContext<AnyModal>>;
+    icon?: string | TemplateRef<ModalTemplateContext<AnyModal>>;
+    okText?: string | TemplateRef<ModalTemplateContext<AnyModal>>;
+    okType?: string;
+    okVariant?: ButtonVariant;
+    okSize?: ButtonSize;
+    cancelText?: string | TemplateRef<ModalTemplateContext<AnyModal>>;
+    cancelType?: string;
+    cancelVariant?: ButtonVariant;
+    cancelSize?: ButtonSize;
+    class?: string;
+}
+```

docs/scos/dev/front-end-development/202212.0/marketplace/table-design/table-column-type-extension/table-column-type-button-action.md

@@ -0,0 +1,106 @@
+---
+title: Table Column Type Button Action
+description: This document provides details about the Table Column Type Button Action in the Components Library.
+template: concept-topic-template
+related:
+  - title: Table Column Type extension
+    link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-extension.html
+  - title: Table Column Type Autocomplete
+    link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-autocomplete.html
+  - title: Table Column Type Chip
+    link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-chip.html
+  - title: Table Column Type Date
+    link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-date.html
+  - title: Table Column Type Dynamic
+    link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-dynamic.html
+  - title: Table Column Type Image
+    link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-image.html
+  - title: Table Column Type Input
+    link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-input.html
+  - title: Table Column Type List
+    link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-list.html
+  - title: Table Column Type Select
+    link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-select.html
+  - title: Table Column Type Text
+    link: docs/scos/dev/front-end-development/page.version/marketplace/table-design/table-column-type-extension/table-column-type-text.html
+---
+
+Table Column Button Action is an Angular component in the components library that renders button using the `@spryker/button.action` component.
+
+
+## Usage
+
+Example of usage in the `@spryker/table` config:
+
+```html
+<spy-table
+    [config]="{
+        ...,
+        columns: [
+            ...,
+            {
+                id: 'columnId',
+                title: 'Column Title',
+                type: 'button-action',
+                typeOptions: {
+                    text: 'text',
+                    action: {
+                        type: 'http',
+                        url: '/url',
+                    },
+                },
+            },
+            ...,
+        ],
+    }"
+>
+</spy-table>
+```
+
+## Component registration
+
+Register the component:
+
+```ts
+declare module '@spryker/table' {
+    interface TableColumnTypeRegistry {
+        'button-action': TableColumnButtonActionConfig;
+    }
+}
+
+@NgModule({
+    imports: [
+        TableModule.forRoot(),
+        TableModule.withColumnComponents({
+            'button-action': TableColumnButtonActionComponent,
+        }),
+        TableColumnButtonActionModule,
+    ],
+})
+export class RootModule {}
+```
+
+## Interfaces
+
+Table Column Button Action interfaces:
+
+```ts
+export type ButtonAttributes = Record<string, string>;
+export type ActionType = RegistryType<ActionsRegistry>;
+
+interface TableColumnButtonAction extends ActionConfig {
+    type: ActionType;
+    [k: string]: unknown;
+}
+
+interface TableColumnButtonActionConfig {
+    /** Bound to the @spryker/button-action inputs */
+    text?: string;
+    action?: TableColumnButtonAction;
+    actionContext?: unknown;
+    variant?: ButtonVariant; // 'primary' - by default
+    shape?: ButtonShape; // 'default' - by default
+    size?: ButtonSize; // 'md' - by default
+    attrs?: ButtonAttributes;
+}
+```