[19.1] Stories (#3300)

* Stories: Data table

* Stories: Skeletons

* Stories: link

* add nowrap on some stories

packages/ng/skeleton/skeleton-data-table/skeleton-data-table.component.html

@@ -1,20 +1,21 @@
 @if (dataTableBodyOnly) {
 <ng-container *ngTemplateOutlet="tbody" />
 } @else {
-<table class="dataTable mod-layoutFixed skeleton is-loading" inert="inert">
-	<thead class="dataTable-head">
-		<tr class="dataTable-head-row">
-			@for (col of colsNumber(); track col) {
-			<th class="dataTable-head-row-cell" scope="col">
-				<span class="skeleton-item" [style.--components-skeleton-text-width]="getRandomPercent()"></span>
-			</th>
-			}
-		</tr>
-	</thead>
-	<ng-container *ngTemplateOutlet="tbody" />
-</table>
+<div class="dataTableWrapper">
+	<table class="dataTable mod-layoutFixed skeleton is-loading" inert="inert">
+		<thead class="dataTable-head">
+			<tr class="dataTable-head-row">
+				@for (col of colsNumber(); track col) {
+				<th class="dataTable-head-row-cell" scope="col">
+					<span class="skeleton-item" [style.--components-skeleton-text-width]="getRandomPercent()"></span>
+				</th>
+				}
+			</tr>
+		</thead>
+		<ng-container *ngTemplateOutlet="tbody" />
+	</table>
+</div>
 }
-
 <ng-template #tbody>
 	<tbody class="dataTable-body">
 		@for (row of rowsNumber(); track row) {

packages/ng/skeleton/skeleton-index-table/skeleton-index-table.component.html

@@ -14,7 +14,6 @@
 	<ng-container *ngTemplateOutlet="tbody" />
 </table>
 }
-
 <ng-template #tbody>
 	<tbody class="indexTable-body">
 		@for (row of rowsNumber(); track row) {

packages/ng/skeleton/skeleton-table/skeleton-table.component.html

@@ -14,7 +14,6 @@
 	<ng-container *ngTemplateOutlet="tbody" />
 </table>
 }
-
 <ng-template #tbody>
 	<tbody class="table-body">
 		@for (row of rowsNumber(); track row) {

stories/documentation/actions/links/angular.stories.ts

@@ -21,7 +21,7 @@ export default {
 
 		return {
 			template: `lorem <a href="${href}" luLink ${externe} ${disable}>${label}</a> dolor<br />
-			lorem <a [luLink]="'${routerLink}'" ${externe} ${disable}>${label}</a> dolor`,
+lorem <a [luLink]="'${routerLink}'" ${externe} ${disable}>${label}</a> dolor`,
 		};
 	},
 	argTypes: {

stories/documentation/listings/data-table/html&css/alignement-horizontal.stories.ts

@@ -0,0 +1,42 @@
+import { Meta, StoryFn } from '@storybook/angular';
+
+interface AlignementHorizontalStory {}
+
+export default {
+	title: 'Documentation/Listings/Data table/HTML&CSS/Horizontal alignement',
+	argTypes: {},
+} as Meta;
+
+function getTemplate(args: AlignementHorizontalStory): string {
+	return `<div class="dataTableWrapper">
+	<table class="dataTable">
+		<thead class="dataTable-head">
+			<tr class="dataTable-head-row">
+				<th class="dataTable-head-row-cell">Label</th>
+				<th class="dataTable-head-row-cell mod-alignCenter">Label</th>
+				<th class="dataTable-head-row-cell mod-alignRight">Label</th>
+			</tr>
+		</thead>
+		<tbody class="dataTable-body">
+			<tr class="dataTable-body-row">
+				<td class="dataTable-body-row-cell">Text</td>
+				<td class="dataTable-body-row-cell mod-alignCenter">Text</td>
+				<td class="dataTable-body-row-cell mod-alignRight">Text</td>
+			</tr>
+			<tr class="dataTable-body-row">
+				<td class="dataTable-body-row-cell">Text</td>
+				<td class="dataTable-body-row-cell mod-alignCenter">Text</td>
+				<td class="dataTable-body-row-cell mod-alignRight">Text</td>
+			</tr>
+		</tbody>
+	</table>
+</div>`;
+}
+
+const Template: StoryFn<AlignementHorizontalStory> = (args) => ({
+	props: args,
+	template: getTemplate(args),
+});
+
+export const AlignementHorizontal = Template.bind({});
+AlignementHorizontal.args = {};

stories/documentation/listings/data-table/html&css/alignement-vertical.stories.ts

@@ -0,0 +1,39 @@
+import { Meta, StoryFn } from '@storybook/angular';
+
+interface AlignementVerticalStory {}
+
+export default {
+	title: 'Documentation/Listings/Data table/HTML&CSS/Vertical alignement',
+	argTypes: {},
+} as Meta;
+
+function getTemplate(args: AlignementVerticalStory): string {
+	return `<div class="dataTableWrapper">
+	<table class="dataTable mod-alignTop">
+		<thead class="dataTable-head">
+			<tr class="dataTable-head-row">
+				<th class="dataTable-head-row-cell">Label</th>
+				<th class="dataTable-head-row-cell">Label</th>
+			</tr>
+		</thead>
+		<tbody class="dataTable-body">
+			<tr class="dataTable-body-row">
+				<td class="dataTable-body-row-cell">Text</td>
+				<td class="dataTable-body-row-cell">Text<br />Text</td>
+			</tr>
+			<tr class="dataTable-body-row">
+				<td class="dataTable-body-row-cell">Text</td>
+				<td class="dataTable-body-row-cell">Text<br />Text</td>
+			</tr>
+		</tbody>
+	</table>
+</div>`;
+}
+
+const Template: StoryFn<AlignementVerticalStory> = (args) => ({
+	props: args,
+	template: getTemplate(args),
+});
+
+export const AlignementVertical = Template.bind({});
+AlignementVertical.args = {};

stories/documentation/listings/data-table/html&css/basic.stories.ts

@@ -0,0 +1,49 @@
+import { Meta, StoryFn } from '@storybook/angular';
+
+interface BasicStory {}
+
+export default {
+	title: 'Documentation/Listings/Data table/HTML&CSS/Basic',
+	argTypes: {},
+} as Meta;
+
+function getTemplate(args: BasicStory): string {
+	return `<div class="dataTableWrapper">
+	<table class="dataTable">
+		<thead class="dataTable-head">
+			<tr class="dataTable-head-row">
+				<th class="dataTable-head-row-cell">Label</th>
+				<th class="dataTable-head-row-cell">Label</th>
+				<th class="dataTable-head-row-cell">Label</th>
+			</tr>
+		</thead>
+		<tbody class="dataTable-body">
+			<tr class="dataTable-body-row">
+				<td class="dataTable-body-row-cell">Text</td>
+				<td class="dataTable-body-row-cell">Text</td>
+				<td class="dataTable-body-row-cell">Text</td>
+			</tr>
+			<tr class="dataTable-body-row">
+				<td class="dataTable-body-row-cell">Text</td>
+				<td class="dataTable-body-row-cell">Text</td>
+				<td class="dataTable-body-row-cell">Text</td>
+			</tr>
+		</tbody>
+		<tfoot class="dataTable-foot">
+			<tr class="dataTable-foot-row">
+				<th class="dataTable-foot-row-cell">Text</th>
+				<th class="dataTable-foot-row-cell">Text</th>
+				<th class="dataTable-foot-row-cell">Text</th>
+			</tr>
+		</tfoot>
+	</table>
+</div>`;
+}
+
+const Template: StoryFn<BasicStory> = (args) => ({
+	props: args,
+	template: getTemplate(args),
+});
+
+export const Basic = Template.bind({});
+Basic.args = {};

stories/documentation/listings/data-table/html&css/cell-border.stories.ts

@@ -0,0 +1,49 @@
+import { Meta, StoryFn } from '@storybook/angular';
+
+interface CellBorderStory {}
+
+export default {
+	title: 'Documentation/Listings/Data table/HTML&CSS/Cell Border',
+	argTypes: {},
+} as Meta;
+
+function getTemplate(args: CellBorderStory): string {
+	return `<div class="dataTableWrapper">
+	<table class="dataTable mod-cellBorder">
+		<thead class="dataTable-head">
+			<tr class="dataTable-head-row">
+				<th class="dataTable-head-row-cell" rowspan="2">Label</th>
+				<th class="dataTable-head-row-cell" colspan="2">Label</th>
+			</tr>
+			<tr class="dataTable-head-row">
+				<th class="dataTable-head-row-cell">Label</th>
+				<th class="dataTable-head-row-cell">Label</th>
+			</tr>
+		</thead>
+		<tbody class="dataTable-body">
+			<tr class="dataTable-body-row">
+				<td class="dataTable-body-row-cell">Text</td>
+				<td class="dataTable-body-row-cell">Text</td>
+				<td class="dataTable-body-row-cell">Text</td>
+			</tr>
+			<tr class="dataTable-body-row">
+				<td class="dataTable-body-row-cell">Text</td>
+				<td class="dataTable-body-row-cell">Text</td>
+				<td class="dataTable-body-row-cell" rowspan="2">Text</td>
+			</tr>
+			<tr class="dataTable-body-row">
+				<td class="dataTable-body-row-cell">Text</td>
+				<td class="dataTable-body-row-cell">Text</td>
+			</tr>
+		</tbody>
+	</table>
+</div>`;
+}
+
+const Template: StoryFn<CellBorderStory> = (args) => ({
+	props: args,
+	template: getTemplate(args),
+});
+
+export const CellBorder = Template.bind({});
+CellBorder.args = {};

stories/documentation/listings/data-table/html&css/draggable.stories.ts

@@ -0,0 +1,63 @@
+import { Meta, StoryFn } from '@storybook/angular';
+
+interface DraggableStory {}
+
+export default {
+	title: 'Documentation/Listings/Data table/HTML&CSS/Draggable',
+	argTypes: {},
+} as Meta;
+
+function getTemplate(args: DraggableStory): string {
+	return `<div class="dataTableWrapper">
+	<table class="dataTable">
+		<thead class="dataTable-head">
+			<tr class="dataTable-head-row mod-draggable">
+				<th class="dataTable-head-row-cell"></th>
+				<th class="dataTable-head-row-cell">Sortable column</th>
+				<th class="dataTable-head-row-cell">Sortable column</th>
+				<th class="dataTable-head-row-cell">Sortable column</th>
+			</tr>
+		</thead>
+		<tbody class="dataTable-body">
+			<tr class="dataTable-body-row mod-draggable">
+				<td class="dataTable-body-row-cell mod-draggable">
+					<button type="button" class="button dataTable-body-row-cell-drag">
+						<span aria-hidden="true" class="lucca-icon icon-dotsDrag"></span><span class="u-mask">Déplacer</span>
+					</button>
+				</td>
+				<td class="dataTable-body-row-cell">Table cell</td>
+				<td class="dataTable-body-row-cell">Table cell</td>
+				<td class="dataTable-body-row-cell">Table cell</td>
+			</tr>
+			<tr class="dataTable-body-row mod-draggable">
+				<td class="dataTable-body-row-cell mod-draggable">
+					<button type="button" class="button dataTable-body-row-cell-drag">
+						<span aria-hidden="true" class="lucca-icon icon-dotsDrag"></span><span class="u-mask">Déplacer</span>
+					</button>
+				</td>
+				<td class="dataTable-body-row-cell">Table cell</td>
+				<td class="dataTable-body-row-cell">Table cell</td>
+				<td class="dataTable-body-row-cell">Table cell</td>
+			</tr>
+			<tr class="dataTable-body-row mod-draggable">
+				<td class="dataTable-body-row-cell mod-draggable">
+					<button type="button" class="button dataTable-body-row-cell-drag">
+						<span aria-hidden="true" class="lucca-icon icon-dotsDrag"></span><span class="u-mask">Déplacer</span>
+					</button>
+				</td>
+				<td class="dataTable-body-row-cell">Table cell</td>
+				<td class="dataTable-body-row-cell">Table cell</td>
+				<td class="dataTable-body-row-cell">Table cell</td>
+			</tr>
+		</tbody>
+	</table>
+</div>`;
+}
+
+const Template: StoryFn<DraggableStory> = (args) => ({
+	props: args,
+	template: getTemplate(args),
+});
+
+export const Draggable = Template.bind({});
+Draggable.args = {};

stories/documentation/listings/data-table/html&css/editable.stories.ts

@@ -0,0 +1,66 @@
+import { Meta, StoryFn } from '@storybook/angular';
+
+interface EditableStory {}
+
+export default {
+	title: 'Documentation/Listings/Data table/HTML&CSS/Editable',
+	argTypes: {},
+} as Meta;
+
+function getTemplate(args: EditableStory): string {
+	return `<div class="dataTableWrapper">
+	<table class="dataTable">
+		<thead class="dataTable-head">
+			<tr class="dataTable-head-row">
+				<th class="dataTable-head-row-cell">Label</th>
+				<th class="dataTable-head-row-cell">Label</th>
+				<th class="dataTable-head-row-cell">Label</th>
+			</tr>
+		</thead>
+		<tbody class="dataTable-body">
+			<tr class="dataTable-body-row">
+				<td class="dataTable-body-row-cell">Text</td>
+				<td class="dataTable-body-row-cell">Text</td>
+				<td class="dataTable-body-row-cell mod-editable">
+					<div class="form-field">
+						<label class="formLabel u-mask" id="IDlabel1" for="ID1">Label</label>
+						<div class="textField">
+							<span class="textField-suffix" id="IDsuffix1">
+								<span class="textField-label-suffix-item">€</span>
+							</span>
+							<div class="textField-input">
+								<input value="Label" type="text" id="ID1" class="textField-input-value" aria-labelledby="IDlabel1 IDsuffix1" />
+							</div>
+						</div>
+					</div>
+				</td>
+			</tr>
+			<tr class="dataTable-body-row">
+				<td class="dataTable-body-row-cell">Text</td>
+				<td class="dataTable-body-row-cell">Text</td>
+				<td class="dataTable-body-row-cell mod-editable">
+					<div class="form-field">
+						<label class="formLabel u-mask" id="IDlabel2" for="ID2">Label</label>
+						<div class="textField">
+							<span class="textField-suffix" id="IDsuffix2">
+								<span class="textField-label-suffix-item">€</span>
+							</span>
+							<div class="textField-input">
+								<input value="Label" type="text" id="ID2" class="textField-input-value" aria-labelledby="IDlabel2 IDsuffix2" />
+							</div>
+						</div>
+					</div>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+</div>`;
+}
+
+const Template: StoryFn<EditableStory> = (args) => ({
+	props: args,
+	template: getTemplate(args),
+});
+
+export const Editable = Template.bind({});
+Editable.args = {};