feat: add documentation for new Actions data-grid cell type (#464)

telekom · Jul 19, 2021 · 5f9f6ef · 5f9f6ef
1 parent 56f1ef9
commit 5f9f6ef
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 7 deletions.
diff --git a/packages/components/src/components/modal/modal.tsx b/packages/components/src/components/modal/modal.tsx
@@ -75,7 +75,7 @@ export class Modal {
 
   /** Fires when the modal has been opened */
   @Event() scaleOpen: EventEmitter<void>;
-  /** Event firing before an Modal Action is called. Propagation to closing the Event can be stoped. Possible actions: `buttonClose` `escapePressed` `backdrop` */
+  /** Fires on every close attempt. Calling `event.preventDefault()` will prevent the modal from closing */
   @Event() scaleBeforeClose: EventEmitter<BeforeCloseEventDetail>;
   /** Fires when the modal has been closed */
   @Event() scaleClose: EventEmitter<void>;

diff --git a/packages/components/src/components/modal/readme.md b/packages/components/src/components/modal/readme.md
@@ -21,11 +21,11 @@
 
 ## Events
 
-| Event              | Description                                                                                                                                               | Type                                  |
-| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
-| `scaleBeforeClose` | Event firing before an Modal Action is called. Propagation to closing the Event can be stoped. Possible actions: `buttonClose` `escapePressed` `backdrop` | `CustomEvent<BeforeCloseEventDetail>` |
-| `scaleClose`       | Fires when the modal has been closed                                                                                                                      | `CustomEvent<void>`                   |
-| `scaleOpen`        | Fires when the modal has been opened                                                                                                                      | `CustomEvent<void>`                   |
+| Event              | Description                                                                                        | Type                                  |
+| ------------------ | -------------------------------------------------------------------------------------------------- | ------------------------------------- |
+| `scaleBeforeClose` | Fires on every close attempt. Calling `event.preventDefault()` will prevent the modal from closing | `CustomEvent<BeforeCloseEventDetail>` |
+| `scaleClose`       | Fires when the modal has been closed                                                               | `CustomEvent<void>`                   |
+| `scaleOpen`        | Fires when the modal has been opened                                                               | `CustomEvent<void>`                   |
 
 
 ## Shadow Parts

diff --git a/packages/storybook-vue/public/assets/3_components/data-grid/Data_components_de.png b/packages/storybook-vue/public/assets/3_components/data-grid/Data_components_de.png
diff --git a/packages/storybook-vue/public/assets/3_components/data-grid/Data_components_en.png b/packages/storybook-vue/public/assets/3_components/data-grid/Data_components_en.png
diff --git a/packages/storybook-vue/stories/3_components/data-grid/DataGrid.stories.mdx b/packages/storybook-vue/stories/3_components/data-grid/DataGrid.stories.mdx
@@ -258,6 +258,7 @@ const rows = [
 
 ## Field Cell Types
 
+ - `actions`
  - `checkbox`
  - `date`
  - `graph`
@@ -287,6 +288,63 @@ const rows = [
 
 ## Cell Type Options
 
+## Actions Cell
+
+Expected format: an array of objects, e.g. `[{ label: 'Edit', onClick: () => { /* ... */ }]`
+
+##### Unique options, and their defaults
+- `label: string = '' | object = { __html: '' }`
+- any `scale-button` attributes
+
+<Canvas withSource="close">
+    <Story name="Actions Cell">
+{`<content>
+    <scale-data-grid id="actions-example" hide-menu></scale-data-grid>
+    <script type="application/javascript">
+    {
+        const dataGrid = document.querySelector('#actions-example');
+        dataGrid.fields = [
+            {
+                type: 'actions',
+                label: 'Actions (secondary)',
+            },
+            {
+                type: 'actions',
+                label: 'Actions (icon-only)',
+            }
+        ];
+        dataGrid.rows = [
+            [
+                [{ label: 'edit', variant: 'secondary', onClick: () => {} }],
+                [
+                    {
+                        label: { __html: '<scale-icon-action-more accessibility-label="More"></scale-icon-action-more>' },
+                        variant: 'ghost'
+                    },
+                    {
+                        label: { __html: '<scale-icon-action-remove accessibility-label="Delete"></scale-icon-action-remove>' }, variant: 'ghost' 
+                    }
+                ]
+            ],
+            [
+                [{ label: 'edit', variant: 'secondary', onClick: () => {} }],
+                [
+                    {
+                        label: { __html: '<scale-icon-action-more accessibility-label="More"></scale-icon-action-more>' },
+                        variant: 'ghost'
+                    },
+                    {
+                        label: { __html: '<scale-icon-action-remove accessibility-label="Delete"></scale-icon-action-remove>' }, variant: 'ghost' 
+                    }
+                ]
+            ]
+        ];
+    }
+    </script>
+</content>`}
+    </Story>
+</Canvas>
+
 ## Checkbox Cell
 
 Expected format: `boolean`, eg `true`

diff --git a/packages/storybook-vue/stories/3_components/data-grid/data-grid_de.md b/packages/storybook-vue/stories/3_components/data-grid/data-grid_de.md
@@ -70,7 +70,7 @@ Mit Hilfe der Pagination bewegen sich Nutzer\*innen gezielt durch den gesamten D
 
 Folgende Inhaltskomponenten kannst du in Data Grids einsetzen:
 
-![Image Name](assets/3_components/data-grid/Data_components_en.png)
+![Image Name](assets/3_components/data-grid/Data_components_de.png)
 
 ## Mobiles Verhalten