mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
[AAE-10446] Storybook CardView module (#7822)
* [AAE-10446] Storybook add CardView component stories * [AAE-10446] Storybook add stories for Array Item Card View component * [AAE-10446] Storybook add stories for Date Item Card View component * [AAE-10446] Storybook add stories for Map Item Card View component * [AAE-10446] Storybook add stories for Text Item Card View component * [AAE-10446] Storybook change selector in Key Value Pairs Item * [AAE-10446] Storybook delete unused code * [AAE-10446] Storybook finish CardViewArrayItem component stories * [AAE-10446] Storybook finish CardViewBoolItem component stories * [AAE-10446] Storybook finish CardViewDateItem component stories * [AAE-10446] Storybook create CardView KeyValuePairs Item component stories * [AAE-10446] Storybook finish CardViewMapItem component stories * [AAE-10446] Storybook create CardViewSelectItem component stories * [AAE-10446] Storybook finish Card View Text Item component stories * [AAE-10446] Storybook fix typo in CardViewTextItem component file * [AAE-10446] Fix imports and lint file properly * [AAE-10446] Lint all the files * [AAE-10446] Storybook change import paths to be more readable * [AAE-10446] Storybook move all objects from card-view story into separate mock file * [AAE-10446] Storybook move mock file
This commit is contained in:
Marcin Krueger
GitHub
parent
6420b3546c
commit
3fdedae769
@ -0,0 +1,61 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Meta, moduleMetadata, Story } from '@storybook/angular';
|
||||
import { CardViewArrayItemComponent } from './card-view-arrayitem.component';
|
||||
import { CoreStoryModule } from './../../../testing/core.story.module';
|
||||
import { CardViewArrayItemModel, CardViewModule } from '../../public-api';
|
||||
import { of } from 'rxjs';
|
||||
|
||||
export default {
|
||||
component: CardViewArrayItemComponent,
|
||||
title: 'Core/Card View/Card View Array Item',
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [CoreStoryModule, CardViewModule]
|
||||
})
|
||||
],
|
||||
argTypes: {
|
||||
property: {
|
||||
description: 'Card View Item Model with data',
|
||||
table: {
|
||||
type: { summary: 'CardViewArrayItemModel' }
|
||||
}
|
||||
}
|
||||
}
|
||||
} as Meta;
|
||||
|
||||
export const CardViewArrayItem: Story<CardViewArrayItemComponent> = (
|
||||
args: CardViewArrayItemComponent
|
||||
) => ({
|
||||
props: args
|
||||
});
|
||||
CardViewArrayItem.args = {
|
||||
property: new CardViewArrayItemModel({
|
||||
label: 'CardView Array of items',
|
||||
value: of([
|
||||
{ icon: 'directions_bike', value: 'Zlatan' },
|
||||
{ icon: 'directions_bike', value: 'Lionel Messi' },
|
||||
{ value: 'Mohamed', directions_bike: 'save' },
|
||||
{ value: 'Ronaldo' }
|
||||
]),
|
||||
key: 'array',
|
||||
icon: 'edit',
|
||||
default: 'Empty',
|
||||
noOfItemsToDisplay: 2
|
||||
})
|
||||
};
|
||||
@ -0,0 +1,62 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Meta, moduleMetadata, Story } from '@storybook/angular';
|
||||
import { CardViewBoolItemComponent } from './card-view-boolitem.component';
|
||||
import { CoreStoryModule } from './../../../testing/core.story.module';
|
||||
import { CardViewBoolItemModel, CardViewModule } from '../../public-api';
|
||||
|
||||
export default {
|
||||
component: CardViewBoolItemComponent,
|
||||
title: 'Core/Card View/Card View Bool Item',
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [CoreStoryModule, CardViewModule]
|
||||
})
|
||||
],
|
||||
argTypes: {
|
||||
editable: {
|
||||
control: 'boolean',
|
||||
description: 'Defines if CardView item is editable',
|
||||
defaultValue: true,
|
||||
table: {
|
||||
type: { summary: 'boolean' }
|
||||
}
|
||||
},
|
||||
property: {
|
||||
description: 'Card View Item Model with data',
|
||||
table: {
|
||||
type: { summary: 'CardViewBoolItemModel' }
|
||||
}
|
||||
}
|
||||
}
|
||||
} as Meta;
|
||||
|
||||
export const CardViewBoolItem: Story<CardViewBoolItemComponent> = (
|
||||
args: CardViewBoolItemComponent
|
||||
) => ({
|
||||
props: args
|
||||
});
|
||||
CardViewBoolItem.args = {
|
||||
property: new CardViewBoolItemModel({
|
||||
label: 'Agree to all terms and conditions',
|
||||
value: true,
|
||||
key: 'boolean',
|
||||
default: false,
|
||||
editable: true
|
||||
})
|
||||
};
|
||||
@ -0,0 +1,133 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Meta, moduleMetadata, Story } from '@storybook/angular';
|
||||
import { CardViewDateItemComponent } from './card-view-dateitem.component';
|
||||
import { CoreStoryModule } from './../../../testing/core.story.module';
|
||||
import {
|
||||
CardViewDateItemModel,
|
||||
CardViewDatetimeItemModel,
|
||||
CardViewModule
|
||||
} from '../../public-api';
|
||||
|
||||
export default {
|
||||
component: CardViewDateItemComponent,
|
||||
title: 'Core/Card View/Card View Date Item',
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [CoreStoryModule, CardViewModule]
|
||||
})
|
||||
],
|
||||
argTypes: {
|
||||
editable: {
|
||||
control: 'boolean',
|
||||
description: 'Defines if CardView item is editable',
|
||||
defaultValue: false,
|
||||
table: {
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: false }
|
||||
}
|
||||
},
|
||||
displayEmpty: {
|
||||
control: 'boolean',
|
||||
description:
|
||||
'Defines if it should display CardView item when data is empty',
|
||||
defaultValue: true,
|
||||
table: {
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: true }
|
||||
}
|
||||
},
|
||||
displayClearAction: {
|
||||
control: 'boolean',
|
||||
description:
|
||||
'Defines if it should display clear input action (only with SingleValued components)',
|
||||
defaultValue: true,
|
||||
table: {
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: true }
|
||||
}
|
||||
},
|
||||
property: {
|
||||
description: 'Card View Item Model with data',
|
||||
table: {
|
||||
type: {
|
||||
summary:
|
||||
'CardViewDateItemModel | CardViewDatetimeItemModel'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} as Meta;
|
||||
|
||||
const template: Story = (args) => ({
|
||||
props: args
|
||||
});
|
||||
|
||||
export const SingleValuedDateItemCardView = template.bind({});
|
||||
|
||||
SingleValuedDateItemCardView.args = {
|
||||
property: new CardViewDateItemModel({
|
||||
label: 'CardView Date Item',
|
||||
value: [new Date(1983, 11, 24, 10, 0, 30)],
|
||||
key: 'date',
|
||||
default: new Date(1983, 11, 24, 10, 0, 30),
|
||||
format: 'shortDate',
|
||||
editable: true
|
||||
})
|
||||
};
|
||||
|
||||
export const MultiValuedDateItemCardView = template.bind({});
|
||||
|
||||
MultiValuedDateItemCardView.args = {
|
||||
property: new CardViewDateItemModel({
|
||||
label: 'CardView Date Item - Multivalue (chips)',
|
||||
value: [new Date(1983, 11, 24, 10, 0, 30)],
|
||||
key: 'date',
|
||||
default: new Date(1983, 11, 24, 10, 0, 30),
|
||||
format: 'shortDate',
|
||||
editable: true,
|
||||
multivalued: true
|
||||
})
|
||||
};
|
||||
|
||||
export const SingleValuedDatetimeItemCardView = template.bind({});
|
||||
|
||||
SingleValuedDatetimeItemCardView.args = {
|
||||
property: new CardViewDatetimeItemModel({
|
||||
label: 'CardView Datetime Item',
|
||||
value: undefined,
|
||||
key: 'datetime',
|
||||
default: undefined,
|
||||
format: 'short',
|
||||
editable: true
|
||||
})
|
||||
};
|
||||
|
||||
export const MultiValuedDatetimeItemCardView = template.bind({});
|
||||
|
||||
MultiValuedDatetimeItemCardView.args = {
|
||||
property: new CardViewDatetimeItemModel({
|
||||
label: 'CardView Datetime Item - Multivalue (chips)',
|
||||
value: undefined,
|
||||
key: 'datetime',
|
||||
default: undefined,
|
||||
format: 'short',
|
||||
editable: true,
|
||||
multivalued: true
|
||||
})
|
||||
};
|
||||
@ -0,0 +1,64 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Meta, moduleMetadata, Story } from '@storybook/angular';
|
||||
import { CardViewKeyValuePairsItemComponent } from './card-view-keyvaluepairsitem.component';
|
||||
import { CoreStoryModule } from './../../../testing/core.story.module';
|
||||
import { CardViewModule, CardViewKeyValuePairsItemModel } from '../../public-api';
|
||||
|
||||
export default {
|
||||
component: CardViewKeyValuePairsItemComponent,
|
||||
title: 'Core/Card View/Card View Key Value Pairs Item',
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [CoreStoryModule, CardViewModule]
|
||||
})
|
||||
],
|
||||
argTypes: {
|
||||
editable: {
|
||||
control: 'boolean',
|
||||
description: 'Defines if CardView item is editable',
|
||||
defaultValue: false,
|
||||
table: {
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: false }
|
||||
}
|
||||
},
|
||||
property: {
|
||||
description: 'Card View Item Model with data',
|
||||
table: {
|
||||
type: { summary: 'CardViewKeyValuePairsItemModel' }
|
||||
}
|
||||
}
|
||||
}
|
||||
} as Meta;
|
||||
|
||||
export const CardViewKeyValuePairsItem: Story<CardViewKeyValuePairsItemComponent> =
|
||||
(args: CardViewKeyValuePairsItemComponent) => ({
|
||||
props: args
|
||||
});
|
||||
CardViewKeyValuePairsItem.args = {
|
||||
property: new CardViewKeyValuePairsItemModel({
|
||||
label: 'CardView Key-Value Pairs Item',
|
||||
value: [
|
||||
{ name: 'hey', value: 'you' },
|
||||
{ name: 'hey', value: 'you' }
|
||||
],
|
||||
key: 'key-value-pairs',
|
||||
editable: true
|
||||
})
|
||||
};
|
||||
@ -23,7 +23,7 @@ import { MatTableDataSource } from '@angular/material/table';
|
||||
import { BaseCardView } from '../base-card-view';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-card-view-boolitem',
|
||||
selector: 'adf-card-view-keyvaluepairsitem',
|
||||
templateUrl: './card-view-keyvaluepairsitem.component.html',
|
||||
styleUrls: ['./card-view-keyvaluepairsitem.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
|
||||
@ -0,0 +1,77 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Meta, moduleMetadata, Story } from '@storybook/angular';
|
||||
import { CardViewMapItemComponent } from './card-view-mapitem.component';
|
||||
import { CoreStoryModule } from './../../../testing/core.story.module';
|
||||
import { CardViewMapItemModel, CardViewModule } from '../../public-api';
|
||||
|
||||
export default {
|
||||
component: CardViewMapItemComponent,
|
||||
title: 'Core/Card View/Card View Map Item',
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [CoreStoryModule, CardViewModule]
|
||||
})
|
||||
],
|
||||
argTypes: {
|
||||
displayEmpty: {
|
||||
control: 'boolean',
|
||||
description:
|
||||
'Defines if it should display CardView item when data is empty',
|
||||
defaultValue: true,
|
||||
table: {
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: true }
|
||||
}
|
||||
},
|
||||
property: {
|
||||
description: 'Card View Item Model with data',
|
||||
table: {
|
||||
type: { summary: 'CardViewMapItemModel' }
|
||||
}
|
||||
}
|
||||
}
|
||||
} as Meta;
|
||||
|
||||
const template: Story<CardViewMapItemComponent> = (
|
||||
args: CardViewMapItemComponent
|
||||
) => ({
|
||||
props: args
|
||||
});
|
||||
|
||||
export const CardViewMapItem = template.bind({});
|
||||
|
||||
CardViewMapItem.args = {
|
||||
property: new CardViewMapItemModel({
|
||||
label: 'My map',
|
||||
value: new Map([['999', 'My Value']]),
|
||||
key: 'map',
|
||||
default: 'default map value'
|
||||
})
|
||||
};
|
||||
|
||||
export const EmptyCardViewMapItem = template.bind({});
|
||||
|
||||
EmptyCardViewMapItem.args = {
|
||||
property: new CardViewMapItemModel({
|
||||
label: 'My map',
|
||||
value: [],
|
||||
key: 'map',
|
||||
default: 'default map value'
|
||||
})
|
||||
};
|
||||
@ -0,0 +1,99 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Meta, moduleMetadata, Story } from '@storybook/angular';
|
||||
import { CardViewSelectItemComponent } from './card-view-selectitem.component';
|
||||
import { CoreStoryModule } from './../../../testing/core.story.module';
|
||||
import { CardViewSelectItemModel, CardViewModule } from '../../public-api';
|
||||
import { of } from 'rxjs';
|
||||
|
||||
export default {
|
||||
component: CardViewSelectItemComponent,
|
||||
title: 'Core/Card View/Card View Select Item',
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [CoreStoryModule, CardViewModule]
|
||||
})
|
||||
],
|
||||
argTypes: {
|
||||
editable: {
|
||||
control: 'boolean',
|
||||
description: 'Defines if CardView item is editable',
|
||||
defaultValue: false,
|
||||
table: {
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: false }
|
||||
}
|
||||
},
|
||||
displayNoneOption: {
|
||||
control: 'boolean',
|
||||
description: 'Shows None option inside select element',
|
||||
defaultValue: true,
|
||||
table: {
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: true }
|
||||
}
|
||||
},
|
||||
displayEmpty: {
|
||||
control: 'boolean',
|
||||
description:
|
||||
'Defines if it should display CardView item when data is empty',
|
||||
defaultValue: true,
|
||||
table: {
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: true }
|
||||
}
|
||||
},
|
||||
options$: {
|
||||
control: { disable: true },
|
||||
description: 'Data displayed in select element',
|
||||
table: {
|
||||
type: {
|
||||
summary:
|
||||
'Observable<CardViewSelectItemOption<string | number>[]>'
|
||||
}
|
||||
}
|
||||
},
|
||||
property: {
|
||||
description: 'Card View Item Model with data',
|
||||
table: {
|
||||
type: { summary: 'CardViewSelectItemModel' }
|
||||
}
|
||||
}
|
||||
}
|
||||
} as Meta;
|
||||
|
||||
const template: Story<CardViewSelectItemComponent> = (
|
||||
args: CardViewSelectItemComponent
|
||||
) => ({
|
||||
props: args
|
||||
});
|
||||
|
||||
export const CardViewSelectItem = template.bind({});
|
||||
|
||||
CardViewSelectItem.args = {
|
||||
property: new CardViewSelectItemModel({
|
||||
label: 'CardView Select Item',
|
||||
value: 'one',
|
||||
options$: of([
|
||||
{ key: 'one', label: 'One' },
|
||||
{ key: 'two', label: 'Two' }
|
||||
]),
|
||||
key: 'select',
|
||||
editable: true
|
||||
})
|
||||
};
|
||||
@ -0,0 +1,145 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Meta, moduleMetadata, Story } from '@storybook/angular';
|
||||
import { CardViewTextItemComponent } from './card-view-textitem.component';
|
||||
import { CoreStoryModule } from './../../../testing/core.story.module';
|
||||
import { CardViewModule, CardViewTextItemModel } from '../../public-api';
|
||||
|
||||
export default {
|
||||
component: CardViewTextItemComponent,
|
||||
title: 'Core/Card View/Card View Text Item',
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [CoreStoryModule, CardViewModule]
|
||||
})
|
||||
],
|
||||
argTypes: {
|
||||
editable: {
|
||||
control: 'boolean',
|
||||
description: 'Defines if CardView item is editable',
|
||||
defaultValue: false,
|
||||
table: {
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: false }
|
||||
}
|
||||
},
|
||||
displayEmpty: {
|
||||
control: 'boolean',
|
||||
description:
|
||||
'Defines if it should display CardView item when data is empty',
|
||||
defaultValue: true,
|
||||
table: {
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: true }
|
||||
}
|
||||
},
|
||||
copyToClipboardAction: {
|
||||
control: 'boolean',
|
||||
description:
|
||||
'Copy to clipboard action - default template in editable mode',
|
||||
defaultValue: true,
|
||||
table: {
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: true }
|
||||
}
|
||||
},
|
||||
useChipsForMultiValueProperty: {
|
||||
control: 'boolean',
|
||||
description: 'Split text for chips using defined separator',
|
||||
defaultValue: true,
|
||||
table: {
|
||||
type: { summary: 'boolean' },
|
||||
defaultValue: { summary: true }
|
||||
}
|
||||
},
|
||||
multiValueSeparator: {
|
||||
control: 'text',
|
||||
description: 'Separator used for text splitting',
|
||||
defaultValue: ', ',
|
||||
table: {
|
||||
type: { summary: 'string' },
|
||||
defaultValue: { summary: ', ' }
|
||||
}
|
||||
}
|
||||
}
|
||||
} as Meta;
|
||||
|
||||
const template: Story<CardViewTextItemComponent> = (
|
||||
args: CardViewTextItemComponent
|
||||
) => ({
|
||||
props: args
|
||||
});
|
||||
|
||||
export const ClickableCardViewTextItem = template.bind({});
|
||||
|
||||
ClickableCardViewTextItem.args = {
|
||||
property: new CardViewTextItemModel({
|
||||
label: 'CardView Text Item - Clickable template',
|
||||
value: 'click here',
|
||||
key: 'click',
|
||||
default: 'click here',
|
||||
editable: true,
|
||||
clickable: true,
|
||||
icon: 'close'
|
||||
})
|
||||
};
|
||||
|
||||
export const ChipsCardViewTextItem = template.bind({});
|
||||
|
||||
ChipsCardViewTextItem.args = {
|
||||
property: new CardViewTextItemModel({
|
||||
label: 'CardView Text Item - Chips template',
|
||||
value: [1, 2, 3, 4],
|
||||
key: 'name',
|
||||
default: 'default bar',
|
||||
multiline: true,
|
||||
multivalued: true,
|
||||
icon: 'icon',
|
||||
editable: true
|
||||
})
|
||||
};
|
||||
|
||||
export const EmptyCardViewTextItem = template.bind({});
|
||||
|
||||
EmptyCardViewTextItem.args = {
|
||||
property: new CardViewTextItemModel({
|
||||
label: 'CardView Text Item - Empty template',
|
||||
value: undefined,
|
||||
key: 'empty',
|
||||
default: '',
|
||||
icon: 'icon',
|
||||
editable: false
|
||||
}),
|
||||
editable: false,
|
||||
displayEmpty: false
|
||||
};
|
||||
|
||||
export const DefaultCardViewTextItem = template.bind({});
|
||||
|
||||
DefaultCardViewTextItem.args = {
|
||||
property: new CardViewTextItemModel({
|
||||
label: 'CardView Text Item - Default template',
|
||||
value: 'input here',
|
||||
key: 'default',
|
||||
default: 'input here',
|
||||
editable: true,
|
||||
clickable: false,
|
||||
icon: 'close',
|
||||
multiline: false
|
||||
})
|
||||
};
|
||||
@ -186,7 +186,7 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
|
||||
}
|
||||
|
||||
copyToClipboard(valueToCopy: string) {
|
||||
if (this.copyToClipboard) {
|
||||
if (this.copyToClipboardAction) {
|
||||
const clipboardMessage = this.translateService.instant('CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
|
||||
this.clipboardService.copyContentToClipboard(valueToCopy, clipboardMessage);
|
||||
}
|
||||
|
||||
@ -0,0 +1,77 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Meta, moduleMetadata, Story } from '@storybook/angular';
|
||||
import { CardViewComponent } from './card-view.component';
|
||||
import { CoreStoryModule } from './../../../testing/core.story.module';
|
||||
import { CardViewModule } from '../../public-api';
|
||||
import { cardViewDataSource, cardViewUndefinedValues } from '../../mock/card-view-content.mock';
|
||||
|
||||
export default {
|
||||
component: CardViewComponent,
|
||||
title: 'Core/Card View/Card View',
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [CoreStoryModule, CardViewModule]
|
||||
})
|
||||
],
|
||||
argTypes: {
|
||||
editable: {
|
||||
control: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
displayEmpty: {
|
||||
control: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
displayNoneOption: {
|
||||
control: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
displayClearAction: {
|
||||
control: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
copyToClipboardAction: {
|
||||
control: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
useChipsForMultiValueProperty: {
|
||||
control: 'boolean',
|
||||
defaultValue: true
|
||||
},
|
||||
multiValueSeparator: {
|
||||
control: 'text',
|
||||
defaultValue: ', '
|
||||
}
|
||||
}
|
||||
} as Meta;
|
||||
|
||||
const template: Story<CardViewComponent> = (args: CardViewComponent) => ({
|
||||
props: args
|
||||
});
|
||||
|
||||
export const defaultStory = template.bind({});
|
||||
defaultStory.args = {
|
||||
properties: cardViewDataSource
|
||||
};
|
||||
|
||||
export const emptyStory = template.bind({});
|
||||
emptyStory.args = {
|
||||
properties: cardViewUndefinedValues,
|
||||
editable: false
|
||||
};
|
||||
185
lib/core/src/lib/card-view/mock/card-view-content.mock.ts
Normal file
185
lib/core/src/lib/card-view/mock/card-view-content.mock.ts
Normal file
@ -0,0 +1,185 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {
|
||||
CardViewArrayItemModel,
|
||||
CardViewBoolItemModel,
|
||||
CardViewDateItemModel,
|
||||
CardViewDatetimeItemModel,
|
||||
CardViewIntItemModel,
|
||||
CardViewKeyValuePairsItemModel,
|
||||
CardViewMapItemModel,
|
||||
CardViewSelectItemModel,
|
||||
CardViewTextItemModel
|
||||
} from '../public-api';
|
||||
import { of } from 'rxjs';
|
||||
|
||||
export const cardViewDataSource = [
|
||||
new CardViewTextItemModel({
|
||||
label: 'CardView Text Item - Multivalue (chips)',
|
||||
value: [1, 2, 3, 4],
|
||||
key: 'name',
|
||||
default: 'default bar',
|
||||
multiline: true,
|
||||
multivalued: true,
|
||||
icon: 'icon',
|
||||
editable: true
|
||||
}),
|
||||
new CardViewDateItemModel({
|
||||
label: 'CardView Date Item - Multivalue (chips)',
|
||||
value: [new Date(1983, 11, 24, 10, 0, 30)],
|
||||
key: 'date',
|
||||
default: new Date(1983, 11, 24, 10, 0, 30),
|
||||
format: 'shortDate',
|
||||
editable: true,
|
||||
multivalued: true
|
||||
}),
|
||||
new CardViewDatetimeItemModel({
|
||||
label: 'CardView Datetime Item - Multivalue (chips)',
|
||||
value: [new Date(1983, 11, 24, 10, 0, 0)],
|
||||
key: 'datetime',
|
||||
default: new Date(1983, 11, 24, 10, 0, 0),
|
||||
format: 'short',
|
||||
editable: true,
|
||||
multivalued: true
|
||||
}),
|
||||
new CardViewBoolItemModel({
|
||||
label: 'Agree to all terms and conditions',
|
||||
value: true,
|
||||
key: 'boolean',
|
||||
default: false,
|
||||
editable: true
|
||||
}),
|
||||
new CardViewIntItemModel({
|
||||
label: 'CardView Int Item',
|
||||
value: 213,
|
||||
key: 'int',
|
||||
default: 1,
|
||||
editable: true
|
||||
}),
|
||||
new CardViewKeyValuePairsItemModel({
|
||||
label: 'CardView Key-Value Pairs Item',
|
||||
value: [
|
||||
{ name: 'hey', value: 'you' },
|
||||
{ name: 'hey', value: 'you' }
|
||||
],
|
||||
key: 'key-value-pairs',
|
||||
editable: true
|
||||
}),
|
||||
new CardViewSelectItemModel({
|
||||
label: 'CardView Select Item',
|
||||
value: 'one',
|
||||
options$: of([
|
||||
{ key: 'one', label: 'One' },
|
||||
{ key: 'two', label: 'Two' }
|
||||
]),
|
||||
key: 'select',
|
||||
editable: true
|
||||
}),
|
||||
new CardViewMapItemModel({
|
||||
label: 'My map',
|
||||
value: new Map([['999', 'My Value']]),
|
||||
key: 'map',
|
||||
default: 'default map value'
|
||||
}),
|
||||
new CardViewTextItemModel({
|
||||
label: 'This is clickable ',
|
||||
value: 'click here',
|
||||
key: 'click',
|
||||
default: 'click here',
|
||||
editable: true,
|
||||
clickable: true,
|
||||
icon: 'close'
|
||||
}),
|
||||
new CardViewArrayItemModel({
|
||||
label: 'CardView Array of items',
|
||||
value: of([
|
||||
{ icon: 'directions_bike', value: 'Zlatan' },
|
||||
{ icon: 'directions_bike', value: 'Lionel Messi' },
|
||||
{ value: 'Mohamed', directions_bike: 'save' },
|
||||
{ value: 'Ronaldo' }
|
||||
]),
|
||||
key: 'array',
|
||||
icon: 'edit',
|
||||
default: 'Empty',
|
||||
noOfItemsToDisplay: 2,
|
||||
editable: true
|
||||
})
|
||||
];
|
||||
|
||||
export const cardViewUndefinedValues = [
|
||||
new CardViewTextItemModel({
|
||||
label: 'CardView Text Item - Multivalue (chips)',
|
||||
value: undefined,
|
||||
key: 'name',
|
||||
default: undefined,
|
||||
multiline: true,
|
||||
multivalued: true,
|
||||
icon: 'icon',
|
||||
editable: true
|
||||
}),
|
||||
new CardViewDateItemModel({
|
||||
label: 'CardView Date Item - Multivalue (chips)',
|
||||
value: undefined,
|
||||
key: 'date',
|
||||
default: undefined,
|
||||
format: 'shortDate',
|
||||
editable: true,
|
||||
multivalued: true
|
||||
}),
|
||||
new CardViewDatetimeItemModel({
|
||||
label: 'CardView Datetime Item - Multivalue (chips)',
|
||||
value: undefined,
|
||||
key: 'datetime',
|
||||
default: undefined,
|
||||
format: 'short',
|
||||
editable: true,
|
||||
multivalued: true
|
||||
}),
|
||||
new CardViewIntItemModel({
|
||||
label: 'CardView Int Item',
|
||||
value: undefined,
|
||||
key: 'int',
|
||||
default: undefined,
|
||||
editable: true
|
||||
}),
|
||||
new CardViewSelectItemModel({
|
||||
label: 'CardView Select Item',
|
||||
value: undefined,
|
||||
options$: of([
|
||||
{ key: 'one', label: 'One' },
|
||||
{ key: 'two', label: 'Two' }
|
||||
]),
|
||||
key: 'select',
|
||||
editable: true
|
||||
}),
|
||||
new CardViewMapItemModel({
|
||||
label: 'My map',
|
||||
value: undefined,
|
||||
key: 'map',
|
||||
default: undefined
|
||||
}),
|
||||
new CardViewTextItemModel({
|
||||
label: 'This is clickable ',
|
||||
value: undefined,
|
||||
key: 'click',
|
||||
default: undefined,
|
||||
editable: true,
|
||||
clickable: true,
|
||||
icon: 'close'
|
||||
})
|
||||
];
|
||||
Loading…
x
Reference in New Issue
Block a user