@carbon/ibm-cloud-cognitive-cdai
Version:
Carbon for Cloud & Cognitive CD&AI UI components
329 lines (327 loc) • 11 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
//
// Copyright IBM Corp. 2020, 2020
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//
import product_graphic from './Artboard.svg';
import { Add32 as AddIcon, Information32 as information, Application32 as application } from '@carbon/icons-react';
import React from 'react';
import { idAttribute } from '../../../component_helpers/IDHelper';
var placeholderOnClick = function placeholderOnClick() {
return true;
};
export var coreConfigFunc = function coreConfigFunc() {
var customProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
return _objectSpread({
headerOne: 'Welcome to IBM <Product Name Here>',
headerTwo: "Let's get you going..",
headerGraphic: {
imgSrc: product_graphic,
imgAlt: 'My image alt text',
imgClassName: 'ide--home-storybook-header'
}
}, customProps);
};
export var gettingStartedSetFunc = function gettingStartedSetFunc() {
var interactionFunction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : placeholderOnClick;
return {
id: 'getting_started',
setHeading: 'Getting Started',
tasks: [{
taskId: 'simulated',
cardSize: 'standard',
taskHeadingTitle: 'Create an instance of',
taskHeading: 'AppConnect',
taskHeadingDescription: 'Secure, control and accelerate delivery of APIs',
taskSubtext: 'Create a simulated topic here',
taskGraphic: AddIcon,
onInteract: interactionFunction
}, {
taskId: 'topic_create',
cardSize: 'standard',
taskHeading: 'Create a topic',
taskSubtext: 'Create a topic here',
taskGraphic: AddIcon,
onInteract: interactionFunction
}, {
taskId: 'schema',
cardSize: 'standard',
taskHeading: 'Create a schema',
taskSubtext: 'Create a schema here',
taskGraphic: AddIcon,
onInteract: interactionFunction
}, {
taskId: 'sample_app',
cardSize: 'standard',
taskHeading: 'Create a sample application',
taskSubtext: 'Generate a sample app quickly and easily',
taskGraphic: application,
onInteract: interactionFunction
}, {
// no size specified - should be defaulted to standard
taskId: 'basics',
taskHeading: 'Product Basics',
taskSubtext: 'Discover this offering',
taskGraphic: information,
onInteract: interactionFunction
}]
};
};
export var disabledCardSet = function disabledCardSet() {
return {
id: 'custom_cards',
setHeading: 'Custom card example',
tasks: [{
taskId: 'custom_card_1',
cardSize: 'standard',
taskHeading: 'Create a topic',
taskGraphic: AddIcon,
taskLinks: [{
text: 'Create instance',
href: '#'
}],
onInteract: function onInteract() {},
disabled: true,
tooltipText: "You don't have access to this content. Please contact admin for support. "
}]
};
};
export var secondaryGraphicCardSet = function secondaryGraphicCardSet() {
return {
id: 'external_icon_type_cards',
setHeading: 'External icon type card example',
tasks: [{
taskId: 'external_icon_type_card_1',
cardSize: 'standard',
taskHeading: 'External icon type card',
taskGraphic: AddIcon,
onInteract: placeholderOnClick,
secondaryGraphic: 'external'
}]
};
};
export var recentTasksSetFunc = function recentTasksSetFunc() {
var interactionFunction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : placeholderOnClick;
return {
id: 'recent_tasks',
setHeading: 'Your recent tasks',
tasks: [{
taskId: 'recent_product_task',
cardSize: 'standard',
taskHeading: 'A recent user task tile',
taskSubtext: "Detect and provide a user's common activities",
onInteract: interactionFunction
}, {
taskId: 'withlinks',
cardSize: 'standard',
taskHeading: 'View all objects',
taskLinks: [{
text: '7 started',
href: '#started'
}, {
text: '6 stopped',
href: '#stopped'
}, {
text: '3 incomplete',
href: '#incomplete'
}],
taskGraphic: information,
onInteract: interactionFunction
}]
};
};
export var cardWidthSetFunc = function cardWidthSetFunc() {
var interactionFunction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : placeholderOnClick;
return {
id: 'my_set_id',
setHeading: 'Custom tasks',
tasks: [{
taskId: 'standard',
cardSize: 'standard',
taskHeading: 'Standard card',
taskSubtext: 'This is a standard card size',
taskGraphic: AddIcon,
onInteract: interactionFunction
}, {
taskId: 'large',
cardSize: 'large',
taskHeading: 'Large card',
taskSubtext: 'This is a large card, which will be twice the width of a standard card',
taskGraphic: AddIcon,
onInteract: interactionFunction
}, {
taskId: 'standard_2',
cardSize: 'standard',
taskHeading: 'Standard card',
taskSubtext: 'This is a standard card size',
taskGraphic: AddIcon,
onInteract: interactionFunction
}]
};
};
export var customCardContentSetFunc = function customCardContentSetFunc() {
var interactionFunction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : placeholderOnClick;
return {
id: 'custom_cards',
setHeading: 'Custom card example',
tasks: [{
taskId: 'custom_card_1',
cardSize: 'standard',
taskHeading: 'Create a topic',
renderFunc: function renderFunc() {
return /*#__PURE__*/React.createElement("div", null, "My custom content. The content of this card is defined in my code using my own JSX!");
},
onInteract: interactionFunction
}]
};
};
export var tasksValidImage = function tasksValidImage() {
return {
id: 'custom_cards',
setHeading: 'Custom card example',
headerGraphic: /*#__PURE__*/React.createElement("img", {
alt: ""
}),
tasks: [{
taskId: 'custom_card_1',
cardSize: 'standard',
taskHeading: 'Create a topic',
taskGraphic: AddIcon,
taskLinks: [{
text: 'Create instance',
href: '#'
}],
onInteract: function onInteract() {}
}]
};
};
export var customInitialTabFunc = function customInitialTabFunc() {
return {
id: 'initial tab',
setHeading: 'Initial Tab',
renderFunc: function renderFunc() {
return /*#__PURE__*/React.createElement("div", idAttribute('tab1'), " Tab 1 Content");
}
};
};
export var customSecondTabFunc = function customSecondTabFunc() {
return {
id: 'second_tab',
setHeading: 'Second Tab',
renderFunc: function renderFunc() {
return /*#__PURE__*/React.createElement("div", idAttribute('tab2'), "Tab 2 Content");
}
};
};
export var customInitialSectionFunc = function customInitialSectionFunc() {
return {
id: 'first_section',
setHeading: 'First Section',
renderFunc: function renderFunc() {
return /*#__PURE__*/React.createElement("div", idAttribute('section1'), " Section 1 Content");
}
};
};
export var customSecondSectionFunc = function customSecondSectionFunc() {
return {
id: 'second_section',
setHeading: 'Second Section',
renderFunc: function renderFunc() {
return /*#__PURE__*/React.createElement("div", idAttribute('section2'), "Section 2 Content");
}
};
};
export var customSecondTabNoRenderFunc = function customSecondTabNoRenderFunc() {
return {
id: 'second_tab',
setHeading: 'Second Tab'
};
};
export var withCustomSetTabFunc = function withCustomSetTabFunc() {
return {
sets: [customInitialTabFunc(), customSecondTabFunc()]
};
};
export var withOneSetToRender = function withOneSetToRender() {
return {
sets: [customInitialTabFunc()]
};
};
export var withNoTasksOrRenderFunc = function withNoTasksOrRenderFunc() {
return {
sets: [customInitialTabFunc(), customSecondTabNoRenderFunc()]
};
};
export var withCustomSetSectionFunc = function withCustomSetSectionFunc() {
return {
sets: [customInitialSectionFunc(), customSecondSectionFunc()],
multipleSetType: 'section'
};
};
export var tasksForEachIdeCardType = function tasksForEachIdeCardType() {
return {
id: 'idecard_types_example',
setHeading: 'Examples of how different task properties map to IDE Cards rendered',
tasks: [
// idecard type specified via `cardType`
{
taskId: 'ide_card',
taskHeading: 'IdeCard type (text) provided via `cardType`',
cardType: 'text',
// type specified
onInteract: function onInteract() {}
},
// custom card content
{
taskId: 'custom_card',
taskHeading: 'Custom Card',
renderFunc: function renderFunc() {
return /*#__PURE__*/React.createElement("div", null, "Custom content IdeCard case, by providing `renderFunc`");
},
onInteract: function onInteract() {}
},
// link
{
taskId: 'link_card',
taskHeading: 'Ide Card link by providing `taskLinks`',
taskLinks: [{
text: 'Create instance',
href: '#'
}],
onInteract: function onInteract() {}
},
// external link
{
taskId: 'external_link_card',
cardHref: '#',
taskHeading: 'Ide Card external link by providing `cardHref` and `cardLinkType`',
cardLinkType: 'external',
onInteract: function onInteract() {}
},
// default/no metadata provided - text
{
taskId: 'no_type',
taskHeading: 'Default IdeCard type when none specified - defaults to text',
onInteract: function onInteract() {}
}]
};
};
export var withAllIdeCardTypes = function withAllIdeCardTypes() {
return {
sets: [tasksForEachIdeCardType()]
};
};
// Only used in tests, as the stories use knobs now
export var withCollapsibleAbility = function withCollapsibleAbility() {
return {
id: 'second_tab',
setHeading: 'Second Tab',
headerCollapsible: true,
headerCollapsed: false,
headerHandleCollapseFunc: function headerHandleCollapseFunc() {}
};
};