{listOfIcons.map((icon, index) => {
@@ -648,23 +19,17 @@ export const IconComponent = () => {
);
return (
-
-
-
- Icons are used throughout the UI to save space, allow for visual clarity
+
-
-
-
-
-
-
-
+ components.`}
+ sourceModulePath={path.join(__dirname, './Icon')}
+ title='Icon'>
-
+
@@ -672,648 +37,24 @@ export const IconComponent = () => {
-
- {iconsCode}
-
-
+
- Available Icons
-
- {icons}
+
+ {icons}
+
- Playground Icon
{
]}>
-
+
+
);
};
diff --git a/src/Identifier/Identifier.Component.js b/src/Identifier/Identifier.Component.js
index f483de42d..d904eac6c 100644
--- a/src/Identifier/Identifier.Component.js
+++ b/src/Identifier/Identifier.Component.js
@@ -1,66 +1,19 @@
import { Identifier } from '../';
+import { listOfIcons } from '../utils/listOfIcons';
import path from 'path';
import React from 'react';
-import { Description, DocsText, DocsTile, Header, Import, Playground, Properties, Separator } from '../_playground';
-
+import { ComponentPage, Example, Playground, Separator } from '../_playground';
export const IdentifierComponent = () => {
- const iconsCode = `
-
-
-
-
-
-
`;
- const initialsCode = `
WW
-
WW
-
WW
-
WW
-
WW
-
WW
-
WW`;
- const circleCode = `
-
-
-
-
-
-
`;
- const backgroundImageCode = `
-
-
-
-
-
-
`;
- const transparentCode = `
WW
-
`;
- const accentColorsCode = `
-
-
-
-
-
-
-
-
`;
-
return (
-
-
-
- An **Identifier** is a visual presentation option around using an icon or user initials.
-
-
-
-
-
-
-
-
-
-
Icon
-
+
+
+
@@ -70,13 +23,11 @@ export const IdentifierComponent = () => {
-
-
{iconsCode}
-
-
+
-
Initials
-
+
WW
WW
@@ -86,13 +37,11 @@ export const IdentifierComponent = () => {
WW
WW
-
-
{initialsCode}
+
-
-
-
Circle
-
+
@@ -109,13 +58,11 @@ export const IdentifierComponent = () => {
-
-
{circleCode}
+
-
-
-
Background image
-
+
@@ -132,26 +79,22 @@ export const IdentifierComponent = () => {
-
-
{backgroundImageCode}
+
-
-
-
Transparent
-
+
WW
-
-
{transparentCode}
-
-
+
-
Accent Colors
-
+
@@ -172,12 +115,10 @@ export const IdentifierComponent = () => {
-
-
{accentColorsCode}
+
-
Playground
{
{
attribute: 'glyph',
typeOfAttribute: 'string',
- 'enum': ['',
- 'accelerated',
- 'accept',
- 'accidental-leave',
- 'account',
- 'accounting-document-verification',
- 'action',
- 'action-settings',
- 'activate',
- 'activities',
- 'activity-2',
- 'activity-assigned-to-goal',
- 'activity-individual',
- 'activity-items',
- 'add',
- 'add-activity',
- 'add-activity-2',
- 'add-contact',
- 'add-coursebook',
- 'add-document',
- 'add-equipment',
- 'add-favorite',
- 'add-filter',
- 'add-photo',
- 'add-process',
- 'add-product',
- 'address-book',
- 'addresses',
- 'alert',
- 'along-stacked-chart',
- 'alphabetical-order',
- 'appointment',
- 'appointment-2',
- 'approvals',
- 'area-chart',
- 'arobase',
- 'arrow-bottom',
- 'arrow-down',
- 'arrow-left',
- 'arrow-right',
- 'arrow-top',
- 'attachment',
- 'attachment-audio',
- 'attachment-e-pub',
- 'attachment-html',
- 'attachment-photo',
- 'attachment-text-file',
- 'attachment-video',
- 'attachment-zip-file',
- 'back-to-top',
- 'background',
- 'badge',
- 'bar-chart',
- 'bar-code',
- 'basket',
- 'batch-payments',
- 'bbyd-active-sales',
- 'bbyd-dashboard',
- 'bed',
- 'begin',
- 'bell',
- 'blank-tag',
- 'blank-tag-2',
- 'bo-strategy-management',
- 'bold-text',
- 'bookmark',
- 'border',
- 'broken-link',
- 'bubble-chart',
- 'building',
- 'bullet-text',
- 'burglary',
- 'bus-public-transport',
- 'business-by-design',
- 'business-card',
- 'business-objects-experience',
- 'business-objects-explorer',
- 'business-objects-mobile',
- 'business-one',
- 'calendar',
- 'call',
- 'camera',
- 'cancel',
- 'cancel-maintenance',
- 'cancel-share',
- 'capital-projects',
- 'car-rental',
- 'card',
- 'cargo-train',
- 'cart',
- 'cart-2',
- 'cart-3',
- 'cart-4',
- 'cart-5',
- 'cart-approval',
- 'cart-full',
- 'cause',
- 'chain-link',
- 'chalkboard',
- 'chart-axis',
- 'chart-table-view',
- 'Chart-Tree-Map',
- 'check-availability',
- 'checklist',
- 'checklist-2',
- 'checklist-item',
- 'checklist-item-2',
- 'chevron-phase',
- 'chevron-phase-2',
- 'choropleth-chart',
- 'circle-task',
- 'circle-task-2',
- 'citizen-connect',
- 'clear-filter',
- 'clinical-order',
- 'clinical-tast-tracker',
- 'close-command-field',
- 'cloud',
- 'co',
- 'collaborate',
- 'collapse',
- 'collapse-group',
- 'collections-insight',
- 'collections-management',
- 'collision',
- 'color-fill',
- 'column-chart-dual-axis',
- 'comment',
- 'commission-check',
- 'company-view',
- 'compare',
- 'compare-2',
- 'competitor',
- 'complete',
- 'connected',
- 'contacts',
- 'copy',
- 'course-book',
- 'course-program',
- 'create',
- 'create-entry-time',
- 'create-form',
- 'create-leave-request',
- 'create-session',
- 'credit-card',
- 'crm-sales',
- 'crm-service-manager',
- 'crop',
- 'crossed-line-chart',
- 'curriculum',
- 'cursor',
- 'customer',
- 'customer-and-contacts',
- 'customer-and-supplier',
- 'customer-briefing',
- 'customer-financial-fact-sheet',
- 'customer-history',
- 'customer-order-entry',
- 'customer-view',
- 'customize',
- 'database',
- 'date-time',
- 'decision',
- 'decline',
- 'decrease-line-height',
- 'delete',
- 'detail-view',
- 'developer-settings',
- 'dimension',
- 'disconnected',
- 'discussion',
- 'discussion-2',
- 'dishwasher',
- 'display',
- 'display-more',
- 'doc-attachment',
- 'doctor',
- 'document',
- 'document-text',
- 'documents',
- 'donut-chart',
- 'down',
- 'download',
- 'download-from-cloud',
- 'draw-rectangle',
- 'drill-down',
- 'drill-up',
- 'drop-down-list',
- 'dropdown',
- 'duplicate',
- 'e-care',
- 'e-learning',
- 'eam-work-order',
- 'edit',
- 'edit-outside',
- 'education',
- 'electrocardiogram',
- 'electronic-medical-record',
- 'email',
- 'email-read',
- 'employee',
- 'employee-approvals',
- 'employee-lookup',
- 'employee-pane',
- 'employee-rejections',
- 'end-user-experience-monitoring',
- 'endoscopy',
- 'energy-saving-lightbulb',
- 'enter-more',
- 'eraser',
- 'error',
- 'example',
- 'excel-attachment',
- 'exitfullscreen',
- 'expand',
- 'expand-group',
- 'expense-report',
- 'explorer',
- 'factory',
- 'fallback',
- 'family-care',
- 'family-protection',
- 'favorite',
- 'favorite-list',
- 'fax-machine',
- 'feed',
- 'feeder-arrow',
- 'filter',
- 'filter-analytics',
- 'filter-facets',
- 'filter-fields',
- 'flag',
- 'flight',
- 'fob-watch',
- 'folder',
- 'folder-blank',
- 'folder-full',
- 'form',
- 'forward',
- 'fridge',
- 'full-screen',
- 'full-stacked-chart',
- 'full-stacked-column-chart',
- 'functional-location',
- 'future',
- 'gantt-bars',
- 'general-leave-request',
- 'generate-shortcut',
- 'geographic-bubble-chart',
- 'globe',
- 'goal',
- 'goalseek',
- 'grid',
- 'group',
- 'group-2',
- 'header',
- 'heading-1',
- 'heading-2',
- 'heading-3',
- 'headset',
- 'heating-cooling',
- 'heatmap-chart',
- 'hello-world',
- 'hide',
- 'hint',
- 'history',
- 'home',
- 'home-share',
- 'horizontal-bar-chart',
- 'horizontal-bar-chart-2',
- 'horizontal-bullet-chart',
- 'horizontal-grip',
- 'horizontal-stacked-chart',
- 'horizontal-waterfall-chart',
- 'hr-approval',
- 'idea-wall',
- 'image-viewer',
- 'inbox',
- 'incident',
- 'incoming-call',
- 'increase-line-height',
- 'indent',
- 'initiative',
- 'inspect',
- 'inspect-down',
- 'inspection',
- 'instance',
- 'insurance-car',
- 'insurance-house',
- 'insurance-life',
- 'internet-browser',
- 'inventory',
- 'ipad',
- 'ipad-2',
- 'iphone',
- 'iphone-2',
- 'it-host',
- 'it-instance',
- 'it-system',
- 'italic-text',
- 'jam',
- 'journey-arrive',
- 'journey-change',
- 'journey-depart',
- 'key',
- 'key-user-settings',
- 'kpi-corporate-performance',
- 'kpi-managing-my-area',
- 'lab',
- 'laptop',
- 'lateness',
- 'lead',
- 'lead-outdated',
- 'leads',
- 'learning-assistant',
- 'legend',
- 'less',
- 'letter',
- 'lightbulb',
- 'line-chart',
- 'line-chart-dual-axis',
- 'line-chart-time-axis',
- 'line-charts',
- 'list',
- 'loan',
- 'locate-me',
- 'locked',
- 'log',
- 'machine',
- 'manager',
- 'manager-insight',
- 'map',
- 'map-2',
- 'map-3',
- 'marketing-campaign',
- 'master-task-triangle',
- 'master-task-triangle-2',
- 'meal',
- 'measure',
- 'measurement-document',
- 'measuring-point',
- 'media-forward',
- 'media-pause',
- 'media-play',
- 'media-reverse',
- 'media-rewind',
- 'meeting-room',
- 'menu',
- 'menu2',
- 'message-error',
- 'message-information',
- 'message-popup',
- 'message-success',
- 'message-warning',
- 'microphone',
- 'mileage',
- 'minimize',
- 'mirrored-task-circle',
- 'mirrored-task-circle-2',
- 'money-bills',
- 'monitor-payments',
- 'move',
- 'mri-scan',
- 'multiple-bar-chart',
- 'multiple-line-chart',
- 'multiple-pie-chart',
- 'multiple-radar-chart',
- 'multiselect',
- 'multiselect-all',
- 'multiselect-none',
- 'my-sales-order',
- 'my-view',
- 'nav-back',
- 'navigation-down-arrow',
- 'navigation-left-arrow',
- 'navigation-right-arrow',
- 'navigation-up-arrow',
- 'negative',
- 'Netweaver-business-client',
- 'newspaper',
- 'notes',
- 'notification-2',
- 'number-sign',
- 'numbered-text',
- 'nurse',
- 'nutrition-activity',
- 'official-service',
- 'offsite-work',
- 'open-command-field',
- 'open-folder',
- 'opportunities',
- 'opportunity',
- 'order-status',
- 'org-chart',
- 'outbox',
- 'outdent',
- 'outgoing-call',
- 'overflow',
- 'overlay',
- 'overview-chart',
- 'paging',
- 'paid-leave',
- 'palette',
- 'paper-plane',
- 'passenger-train',
- 'past',
- 'paste',
- 'pause',
- 'payment-approval',
- 'pdf-attachment',
- 'pdf-reader',
- 'pending',
- 'per-diem',
- 'performance',
- 'permission',
- 'person-placeholder',
- 'personnel-view',
- 'pharmacy',
- 'phone',
- 'photo-voltaic',
- 'physical-activity',
- 'picture',
- 'pie-chart',
- 'pipeline-analysis',
- 'play',
- 'pool',
- 'popup-window',
- 'positive',
- 'post',
- 'ppt-attachment',
- 'present',
- 'print',
- 'private',
- 'process',
- 'product',
- 'program-triangles',
- 'program-triangles-2',
- 'project-definition-triangle',
- 'project-definition-triangle-2',
- 'projector',
- 'provision',
- 'pull-down',
- 'pushpin-off',
- 'pushpin-on',
- 'puzzle',
- 'quality-issue',
- 'question-mark',
- 'radar-chart',
- 'receipt',
- 'record',
- 'redo',
- 'refresh',
- 'repost',
- 'request',
- 'reset',
- 'resize',
- 'resize-corner',
- 'resize-horizontal',
- 'resize-vertical',
- 'response',
- 'restart',
- 'retail-store',
- 'retail-store-manager',
- 'rhombus-milestone',
- 'rhombus-milestone-2',
- 'role',
- 'sales-document',
- 'sales-notification',
- 'sales-order',
- 'sales-order-item',
- 'sales-quote',
- 'sap-box',
- 'sap-logo-shape',
- 'sap-ui5',
- 'save',
- 'scatter-chart',
- 'scissors',
- 'screen-split-one',
- 'screen-split-three',
- 'screen-split-two',
- 'search',
- 'settings',
- 'share',
- 'share-2',
- 'shelf',
- 'shield',
- 'shipping-status',
- 'shortcut',
- 'show',
- 'signature',
- 'simple-payment',
- 'simulate',
- 'slim-arrow-down',
- 'slim-arrow-left',
- 'slim-arrow-right',
- 'slim-arrow-up',
- 'soccor',
- 'sonography',
- 'sort',
- 'sort-ascending',
- 'sort-descending',
- 'sorting-ranking',
- 'sound',
- 'sound-loud',
- 'sound-off',
- 'source-code',
- 'status-critical',
- 'status-inactive',
- 'status-negative',
- 'status-positive',
- 'step',
- 'stethoscope',
- 'stop',
- 'study-leave',
- 'subway-train',
- 'suitcase',
- 'supplier',
- 'survey',
- 'switch-classes',
- 'switch-views',
- 'synchronize',
- 'syntax',
- 'syringe',
- 'sys-add',
- 'sys-back',
- 'sys-back-2',
- 'sys-cancel',
- 'sys-cancel-2',
- 'sys-enter',
- 'sys-enter-2',
- 'sys-find',
- 'sys-find-next',
- 'sys-first-page',
- 'sys-help',
- 'sys-help-2',
- 'sys-last-page',
- 'sys-minus',
- 'sys-monitor',
- 'sys-next-page',
- 'sys-prev-page',
- 'system-exit',
- 'system-exit-2',
- 'table-chart',
- 'table-view',
- 'tag',
- 'tag-cloud-chart',
- 'tags',
- 'target-group',
- 'task',
- 'taxi',
- 'technical-object',
- 'temperature',
- 'text-align-center',
- 'text-align-justified',
- 'text-align-left',
- 'text-align-right',
- 'text-formatting',
- 'theater',
- 'thing-type',
- 'thumb-down',
- 'thumb-up',
- 'time-account',
- 'time-entry-request',
- 'time-overtime',
- 'timesheet',
- 'to-be-reviewed',
- 'toaster-down',
- 'toaster-top',
- 'toaster-up',
- 'tools-opportunity',
- 'travel-expense',
- 'travel-expense-report',
- 'travel-itinerary',
- 'travel-request',
- 'tree',
- 'trend-down',
- 'trend-up',
- 'trip-report',
- 'ui-notifications',
- 'umbrella',
- 'underline-text',
- 'undo',
- 'unfavorite',
- 'unlocked',
- 'unpaid-leave',
- 'unwired',
- 'up',
- 'upload',
- 'upload-to-cloud',
- 'upstacked-chart',
- 'user-edit',
- 'user-settings',
- 'value-help',
- 'vds-file',
- 'vehicle-repair',
- 'vertical-bar-chart',
- 'vertical-bar-chart-2',
- 'vertical-bullet-chart',
- 'vertical-grip',
- 'vertical-stacked-chart',
- 'vertical-waterfall-chart',
- 'video',
- 'visits',
- 'waiver',
- 'wallet',
- 'warning',
- 'warning2',
- 'washing-machine',
- 'weather-proofing',
- 'web-cam',
- 'widgets',
- 'windows-doors',
- 'work-history',
- 'workflow-tasks',
- 'world',
- 'wounds-doc',
- 'wrench',
- 'write-new',
- 'write-new-document',
- 'x-ray',
- 'zoom-in',
- 'zoom-out']
+ 'enum': listOfIcons
},
{
attribute: 'color',
@@ -828,6 +148,7 @@ export const IdentifierComponent = () => {
label='Wendy Wallace' modifier='circle'
size='s' />
-
+
+
);
};
diff --git a/src/Image/Image.Component.js b/src/Image/Image.Component.js
index f22466497..71df3ca2a 100644
--- a/src/Image/Image.Component.js
+++ b/src/Image/Image.Component.js
@@ -1,44 +1,28 @@
import { Image } from '../';
import path from 'path';
import React from 'react';
-import { Description, DocsText, DocsTile, Header, Import, Playground, Properties, Separator } from '../_playground';
+import { ComponentPage, Example, Playground, Separator } from '../_playground';
export const ImageComponent = () => {
- const sizesImageCode = `
-
-
`;
-
- const shapesImageCode = `
-
-
`;
return (
-
-
-
- Use an **Image** component to display images.
-
-
-
-
-
-
-
-
-
-
Sizes
-
+
+
+
-
-
{sizesImageCode}
+
-
-
-
Shapes
-
+
@@ -47,11 +31,10 @@ export const ImageComponent = () => {
-
-
{shapesImageCode}
+
-
Playground
+
{
]}>
-
+
);
};
diff --git a/src/InlineHelp/InlineHelp.Component.js b/src/InlineHelp/InlineHelp.Component.js
index e5ab725af..72597f05a 100644
--- a/src/InlineHelp/InlineHelp.Component.js
+++ b/src/InlineHelp/InlineHelp.Component.js
@@ -1,73 +1,61 @@
import { InlineHelp } from '../';
import path from 'path';
import React from 'react';
-import { Description, DocsText, DocsTile, Header, Import, Properties, Separator } from '../_playground';
-
+import { ComponentPage, Example } from '../_playground';
export const InlineHelpComponent = () => {
- const defaultHelpPlacement = '
';
- const bottomLeftHelpPlacement = '
';
- const rightHelpPlacement = '
';
- const leftHelpPlacement = '
';
- const centerHelpPlacement = '
';
-
return (
-
-
-
- **Inline Help** is used to display help text in a **Popover**, often inline with headers,
- body text and form labels.
-
-
-
-
-
-
-
-
-
-
Default Position
-
- Bottom Right (Default)
-
-
-
{defaultHelpPlacement}
-
-
-
-
Bottom Left Position
-
- Bottom Left
-
-
-
{bottomLeftHelpPlacement}
-
-
-
-
Bottom Center Position
-
- Bottom Center
-
-
-
{centerHelpPlacement}
-
-
-
-
Right Position
-
- Right
-
-
-
{rightHelpPlacement}
-
-
-
-
Left Position
-
- Left
-
-
-
{leftHelpPlacement}
-
+
+
+
+
+ Bottom Right (Default)
+
+
+
+
+
+
+ Bottom Left
+
+
+
+
+
+
+ Bottom Center
+
+
+
+
+
+
+ Right
+
+
+
+
+
+
+ Left
+
+
+
+
+
);
};
diff --git a/src/InputGroup/InputGroup.Component.js b/src/InputGroup/InputGroup.Component.js
index 2f9b40d0c..3ce358ae7 100644
--- a/src/InputGroup/InputGroup.Component.js
+++ b/src/InputGroup/InputGroup.Component.js
@@ -1,374 +1,232 @@
+import { listOfIcons } from '../utils/listOfIcons';
import path from 'path';
import React from 'react';
import { Button, FormGroup, FormItem, FormLabel, InputGroup } from '../';
-import { Description, DocsText, DocsTile, Header, Import, Playground, Properties, Separator } from '../_playground';
+import { ComponentPage, Example, Playground, Separator } from '../_playground';
export const InputGroupComponent = () => {
- const textAddonCode = `
- Left Aligned Text Addon
-
-
-
-
-
-
- Right Aligned Text Addon
-
-
-
-
-
-Compact Mode:
-
- Left Aligned Text Addon
-
-
-
-
-
-
- Right Aligned Text Addon
-
-
-
-`;
-
- const numberInputCode = `
- Right Aligned Text Addon
-
-
-
-
-
-Compact mode:
-
- Right Aligned Text Addon
-
-
-
-`;
-
- const inputWithIconsCode = `
- Search Input
-
-
-
-
-
-Compact mode:
-
- Search Input
-
-
-
-
-
-
- Input with icon on the left
-
-
-
-
-
-Compact mode:
-
- Input with icon on the left
-
-
-
-
-
-
- Input with icon on the right
-
-
-
-
-
-Compact mode:
-
- Input with icon on the right
-
-
-
-`;
-
- const inputWithActionsCode = `
- Input with text action
-
-
-
-
-
-
-
-Compact mode:
-
- Input with text action
-
-
-
-
-
-
-
-
- Input with icon text action
-
-
-
-
-
-
-
-Compact mode:
-
- Input with icon text action
-
-
-
-
-
-`;
-
return (
-
-
-
- The **Input Group** includes form inputs with add-ons that allow the user to
- better understand the information being entered.
-
-
-
-
-
-
-
-
-
-
Text add-on
-
- The Input with text add-on component is typically used to specify the
- type of the data being entered, such as currency or unit of measure.
- This add-on can be placed at the left or right of the input element.
-
-
-
- Left Aligned Text Addon
-
-
-
-
-
-
- Right Aligned Text Addon
-
-
-
-
-
-
- Compact mode
-
-
- Left Aligned Text Addon
-
-
-
-
-
-
- Right Aligned Text Addon
-
-
-
-
-
-
{textAddonCode}
-
-
-
-
Number input
-
- For an integer value input, a spinner can be added allowing the user to
- increase or decrease the value.
-
-
-
- Right Aligned Text Addon
-
-
-
-
-
-
- Compact mode
-
-
- Right Aligned Text Addon
-
-
-
-
-
-
{numberInputCode}
-
-
-
-
Input with icons
-
The Input with add-on supports icons.
-
-
- Search Input
-
-
-
-
-
- Compact mode
-
- Search Input
-
-
-
-
-
-
-
- Input with icon on the left
-
-
-
-
-
- Compact mode
-
- Input with icon on the left
-
-
-
-
-
-
-
- Input with icon on the right
-
-
-
-
-
- Compact mode
-
- Input with icon on the right
-
-
-
-
-
-
{inputWithIconsCode}
+
+
+
+
+
+ Left Aligned Text Addon
+
+
+
+
+
+
+ Right Aligned Text Addon
+
+
+
+
+
+
+
Compact mode
+
+
+ Left Aligned Text Addon
+
+
+
+
+
+
+ Right Aligned Text Addon
+
+
+
+
+
+
+ Right Aligned Text Addon
+
+
+
+
+
+
+
Compact mode
+
+
+ Right Aligned Text Addon
+
+
+
+
+
+
+ Search Input
+
+
+
+
+
+
Compact mode
+
+ Search Input
+
+
+
+
+
+
+
+ Input with icon on the left
+
+
+
+
+
+
Compact mode
+
+ Input with icon on the left
+
+
+
+
+
+
+
+ Input with icon on the right
+
+
+
+
+
+
Compact mode
+
+ Input with icon on the right
+
+
+
+
+
+
+ Input with text action
+
+
+
+
+
+
+
+
Compact mode
+
+ Input with text action
+
+
+
+
+
+
+
+
+
+ Input with icon text action
+
+
+
+
+
+
+
+
Compact mode
+
+ Input with icon text action
+
+
+
+
+
+
+
Input with actions
-
- The Input with add-on supports actions. Actions can be shown with a text
- label or icon.
-
-
-
- Input with text action
-
-
-
-
-
-
-
- Compact mode
-
- Input with text action
-
-
-
-
-
-
-
-
-
- Input with icon text action
-
-
-
-
-
-
-
- Compact mode
-
- Input with icon text action
-
-
-
-
-
-
-
- {inputWithActionsCode}
-
-
- Playground
-
+
+
);
};
diff --git a/src/ListGroup/ListGroup.Component.js b/src/ListGroup/ListGroup.Component.js
index f42d6cb89..3a06c0307 100644
--- a/src/ListGroup/ListGroup.Component.js
+++ b/src/ListGroup/ListGroup.Component.js
@@ -1,82 +1,32 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
+import { listOfIcons } from '../utils/listOfIcons';
import path from 'path';
import React from 'react';
import { Button, ListGroup } from '../';
-import { Description, DocsText, DocsTile, Header, Import, Playground, Properties, Separator } from '../_playground';
+import { ComponentPage, Example, Playground, Separator } from '../_playground';
export const ListGroupComponent = () => {
- const simpleListCode = `
- List item 1
- List item 2
- List item3
- List item 4
-`;
-
- const actionsListCode = `
- List item 1
-
-
-
-
- List item 2
-
-
-
-
- List item 3
-
-
-
-
- List item 4
-
-
-
-
-`;
-
- const checkboxListCode = `
- List item 1
- List item 2
- List item 3
- List item 4
-`;
-
-
return (
-
-
-
-
- Lists and tables are similar as both usually contain a vertical list of data,
+
-
-
-
-
-
+ If the list is a complex hierarchy, it is best to use a **Tree**.`}
+ sourceModulePath={path.join(__dirname, './ListGroup')}
+ title='List Group'>
-
-
- Simple List
- A link can be used to allow the user to access more details about the item.
-
+
List item 1
List item 2
- List item3
+ List item 3
List item 4
-
- {simpleListCode}
-
-
+
- Lists with Action
- The List item can contain quick actions.
-
+
List item 1
@@ -99,26 +49,21 @@ export const ListGroupComponent = () => {
-
- {actionsListCode}
+
-
-
- List with Checkboxes
- Checkboxes can be include on the left of each line for such purposes as bulk actions.
-
+
List item 1
List item 2
List item 3
List item 4
-
- {checkboxListCode}
+
- Playground
{
{
attribute: 'glyph',
typeOfAttribute: 'string',
- 'enum': ['',
- 'accelerated',
- 'accept',
- 'accidental-leave',
- 'account',
- 'accounting-document-verification',
- 'action',
- 'action-settings',
- 'activate',
- 'activities',
- 'activity-2',
- 'activity-assigned-to-goal',
- 'activity-individual',
- 'activity-items',
- 'add',
- 'add-activity',
- 'add-activity-2',
- 'add-contact',
- 'add-coursebook',
- 'add-document',
- 'add-equipment',
- 'add-favorite',
- 'add-filter',
- 'add-photo',
- 'add-process',
- 'add-product',
- 'address-book',
- 'addresses',
- 'alert',
- 'along-stacked-chart',
- 'alphabetical-order',
- 'appointment',
- 'appointment-2',
- 'approvals',
- 'area-chart',
- 'arobase',
- 'arrow-bottom',
- 'arrow-down',
- 'arrow-left',
- 'arrow-right',
- 'arrow-top',
- 'attachment',
- 'attachment-audio',
- 'attachment-e-pub',
- 'attachment-html',
- 'attachment-photo',
- 'attachment-text-file',
- 'attachment-video',
- 'attachment-zip-file',
- 'back-to-top',
- 'background',
- 'badge',
- 'bar-chart',
- 'bar-code',
- 'basket',
- 'batch-payments',
- 'bbyd-active-sales',
- 'bbyd-dashboard',
- 'bed',
- 'begin',
- 'bell',
- 'blank-tag',
- 'blank-tag-2',
- 'bo-strategy-management',
- 'bold-text',
- 'bookmark',
- 'border',
- 'broken-link',
- 'bubble-chart',
- 'building',
- 'bullet-text',
- 'burglary',
- 'bus-public-transport',
- 'business-by-design',
- 'business-card',
- 'business-objects-experience',
- 'business-objects-explorer',
- 'business-objects-mobile',
- 'business-one',
- 'calendar',
- 'call',
- 'camera',
- 'cancel',
- 'cancel-maintenance',
- 'cancel-share',
- 'capital-projects',
- 'car-rental',
- 'card',
- 'cargo-train',
- 'cart',
- 'cart-2',
- 'cart-3',
- 'cart-4',
- 'cart-5',
- 'cart-approval',
- 'cart-full',
- 'cause',
- 'chain-link',
- 'chalkboard',
- 'chart-axis',
- 'chart-table-view',
- 'Chart-Tree-Map',
- 'check-availability',
- 'checklist',
- 'checklist-2',
- 'checklist-item',
- 'checklist-item-2',
- 'chevron-phase',
- 'chevron-phase-2',
- 'choropleth-chart',
- 'circle-task',
- 'circle-task-2',
- 'citizen-connect',
- 'clear-filter',
- 'clinical-order',
- 'clinical-tast-tracker',
- 'close-command-field',
- 'cloud',
- 'co',
- 'collaborate',
- 'collapse',
- 'collapse-group',
- 'collections-insight',
- 'collections-management',
- 'collision',
- 'color-fill',
- 'column-chart-dual-axis',
- 'comment',
- 'commission-check',
- 'company-view',
- 'compare',
- 'compare-2',
- 'competitor',
- 'complete',
- 'connected',
- 'contacts',
- 'copy',
- 'course-book',
- 'course-program',
- 'create',
- 'create-entry-time',
- 'create-form',
- 'create-leave-request',
- 'create-session',
- 'credit-card',
- 'crm-sales',
- 'crm-service-manager',
- 'crop',
- 'crossed-line-chart',
- 'curriculum',
- 'cursor',
- 'customer',
- 'customer-and-contacts',
- 'customer-and-supplier',
- 'customer-briefing',
- 'customer-financial-fact-sheet',
- 'customer-history',
- 'customer-order-entry',
- 'customer-view',
- 'customize',
- 'database',
- 'date-time',
- 'decision',
- 'decline',
- 'decrease-line-height',
- 'delete',
- 'detail-view',
- 'developer-settings',
- 'dimension',
- 'disconnected',
- 'discussion',
- 'discussion-2',
- 'dishwasher',
- 'display',
- 'display-more',
- 'doc-attachment',
- 'doctor',
- 'document',
- 'document-text',
- 'documents',
- 'donut-chart',
- 'down',
- 'download',
- 'download-from-cloud',
- 'draw-rectangle',
- 'drill-down',
- 'drill-up',
- 'drop-down-list',
- 'dropdown',
- 'duplicate',
- 'e-care',
- 'e-learning',
- 'eam-work-order',
- 'edit',
- 'edit-outside',
- 'education',
- 'electrocardiogram',
- 'electronic-medical-record',
- 'email',
- 'email-read',
- 'employee',
- 'employee-approvals',
- 'employee-lookup',
- 'employee-pane',
- 'employee-rejections',
- 'end-user-experience-monitoring',
- 'endoscopy',
- 'energy-saving-lightbulb',
- 'enter-more',
- 'eraser',
- 'error',
- 'example',
- 'excel-attachment',
- 'exitfullscreen',
- 'expand',
- 'expand-group',
- 'expense-report',
- 'explorer',
- 'factory',
- 'fallback',
- 'family-care',
- 'family-protection',
- 'favorite',
- 'favorite-list',
- 'fax-machine',
- 'feed',
- 'feeder-arrow',
- 'filter',
- 'filter-analytics',
- 'filter-facets',
- 'filter-fields',
- 'flag',
- 'flight',
- 'fob-watch',
- 'folder',
- 'folder-blank',
- 'folder-full',
- 'form',
- 'forward',
- 'fridge',
- 'full-screen',
- 'full-stacked-chart',
- 'full-stacked-column-chart',
- 'functional-location',
- 'future',
- 'gantt-bars',
- 'general-leave-request',
- 'generate-shortcut',
- 'geographic-bubble-chart',
- 'globe',
- 'goal',
- 'goalseek',
- 'grid',
- 'group',
- 'group-2',
- 'header',
- 'heading-1',
- 'heading-2',
- 'heading-3',
- 'headset',
- 'heating-cooling',
- 'heatmap-chart',
- 'hello-world',
- 'hide',
- 'hint',
- 'history',
- 'home',
- 'home-share',
- 'horizontal-bar-chart',
- 'horizontal-bar-chart-2',
- 'horizontal-bullet-chart',
- 'horizontal-grip',
- 'horizontal-stacked-chart',
- 'horizontal-waterfall-chart',
- 'hr-approval',
- 'idea-wall',
- 'image-viewer',
- 'inbox',
- 'incident',
- 'incoming-call',
- 'increase-line-height',
- 'indent',
- 'initiative',
- 'inspect',
- 'inspect-down',
- 'inspection',
- 'instance',
- 'insurance-car',
- 'insurance-house',
- 'insurance-life',
- 'internet-browser',
- 'inventory',
- 'ipad',
- 'ipad-2',
- 'iphone',
- 'iphone-2',
- 'it-host',
- 'it-instance',
- 'it-system',
- 'italic-text',
- 'jam',
- 'journey-arrive',
- 'journey-change',
- 'journey-depart',
- 'key',
- 'key-user-settings',
- 'kpi-corporate-performance',
- 'kpi-managing-my-area',
- 'lab',
- 'laptop',
- 'lateness',
- 'lead',
- 'lead-outdated',
- 'leads',
- 'learning-assistant',
- 'legend',
- 'less',
- 'letter',
- 'lightbulb',
- 'line-chart',
- 'line-chart-dual-axis',
- 'line-chart-time-axis',
- 'line-charts',
- 'list',
- 'loan',
- 'locate-me',
- 'locked',
- 'log',
- 'machine',
- 'manager',
- 'manager-insight',
- 'map',
- 'map-2',
- 'map-3',
- 'marketing-campaign',
- 'master-task-triangle',
- 'master-task-triangle-2',
- 'meal',
- 'measure',
- 'measurement-document',
- 'measuring-point',
- 'media-forward',
- 'media-pause',
- 'media-play',
- 'media-reverse',
- 'media-rewind',
- 'meeting-room',
- 'menu',
- 'menu2',
- 'message-error',
- 'message-information',
- 'message-popup',
- 'message-success',
- 'message-warning',
- 'microphone',
- 'mileage',
- 'minimize',
- 'mirrored-task-circle',
- 'mirrored-task-circle-2',
- 'money-bills',
- 'monitor-payments',
- 'move',
- 'mri-scan',
- 'multiple-bar-chart',
- 'multiple-line-chart',
- 'multiple-pie-chart',
- 'multiple-radar-chart',
- 'multiselect',
- 'multiselect-all',
- 'multiselect-none',
- 'my-sales-order',
- 'my-view',
- 'nav-back',
- 'navigation-down-arrow',
- 'navigation-left-arrow',
- 'navigation-right-arrow',
- 'navigation-up-arrow',
- 'negative',
- 'Netweaver-business-client',
- 'newspaper',
- 'notes',
- 'notification-2',
- 'number-sign',
- 'numbered-text',
- 'nurse',
- 'nutrition-activity',
- 'official-service',
- 'offsite-work',
- 'open-command-field',
- 'open-folder',
- 'opportunities',
- 'opportunity',
- 'order-status',
- 'org-chart',
- 'outbox',
- 'outdent',
- 'outgoing-call',
- 'overflow',
- 'overlay',
- 'overview-chart',
- 'paging',
- 'paid-leave',
- 'palette',
- 'paper-plane',
- 'passenger-train',
- 'past',
- 'paste',
- 'pause',
- 'payment-approval',
- 'pdf-attachment',
- 'pdf-reader',
- 'pending',
- 'per-diem',
- 'performance',
- 'permission',
- 'person-placeholder',
- 'personnel-view',
- 'pharmacy',
- 'phone',
- 'photo-voltaic',
- 'physical-activity',
- 'picture',
- 'pie-chart',
- 'pipeline-analysis',
- 'play',
- 'pool',
- 'popup-window',
- 'positive',
- 'post',
- 'ppt-attachment',
- 'present',
- 'print',
- 'private',
- 'process',
- 'product',
- 'program-triangles',
- 'program-triangles-2',
- 'project-definition-triangle',
- 'project-definition-triangle-2',
- 'projector',
- 'provision',
- 'pull-down',
- 'pushpin-off',
- 'pushpin-on',
- 'puzzle',
- 'quality-issue',
- 'question-mark',
- 'radar-chart',
- 'receipt',
- 'record',
- 'redo',
- 'refresh',
- 'repost',
- 'request',
- 'reset',
- 'resize',
- 'resize-corner',
- 'resize-horizontal',
- 'resize-vertical',
- 'response',
- 'restart',
- 'retail-store',
- 'retail-store-manager',
- 'rhombus-milestone',
- 'rhombus-milestone-2',
- 'role',
- 'sales-document',
- 'sales-notification',
- 'sales-order',
- 'sales-order-item',
- 'sales-quote',
- 'sap-box',
- 'sap-logo-shape',
- 'sap-ui5',
- 'save',
- 'scatter-chart',
- 'scissors',
- 'screen-split-one',
- 'screen-split-three',
- 'screen-split-two',
- 'search',
- 'settings',
- 'share',
- 'share-2',
- 'shelf',
- 'shield',
- 'shipping-status',
- 'shortcut',
- 'show',
- 'signature',
- 'simple-payment',
- 'simulate',
- 'slim-arrow-down',
- 'slim-arrow-left',
- 'slim-arrow-right',
- 'slim-arrow-up',
- 'soccor',
- 'sonography',
- 'sort',
- 'sort-ascending',
- 'sort-descending',
- 'sorting-ranking',
- 'sound',
- 'sound-loud',
- 'sound-off',
- 'source-code',
- 'status-critical',
- 'status-inactive',
- 'status-negative',
- 'status-positive',
- 'step',
- 'stethoscope',
- 'stop',
- 'study-leave',
- 'subway-train',
- 'suitcase',
- 'supplier',
- 'survey',
- 'switch-classes',
- 'switch-views',
- 'synchronize',
- 'syntax',
- 'syringe',
- 'sys-add',
- 'sys-back',
- 'sys-back-2',
- 'sys-cancel',
- 'sys-cancel-2',
- 'sys-enter',
- 'sys-enter-2',
- 'sys-find',
- 'sys-find-next',
- 'sys-first-page',
- 'sys-help',
- 'sys-help-2',
- 'sys-last-page',
- 'sys-minus',
- 'sys-monitor',
- 'sys-next-page',
- 'sys-prev-page',
- 'system-exit',
- 'system-exit-2',
- 'table-chart',
- 'table-view',
- 'tag',
- 'tag-cloud-chart',
- 'tags',
- 'target-group',
- 'task',
- 'taxi',
- 'technical-object',
- 'temperature',
- 'text-align-center',
- 'text-align-justified',
- 'text-align-left',
- 'text-align-right',
- 'text-formatting',
- 'theater',
- 'thing-type',
- 'thumb-down',
- 'thumb-up',
- 'time-account',
- 'time-entry-request',
- 'time-overtime',
- 'timesheet',
- 'to-be-reviewed',
- 'toaster-down',
- 'toaster-top',
- 'toaster-up',
- 'tools-opportunity',
- 'travel-expense',
- 'travel-expense-report',
- 'travel-itinerary',
- 'travel-request',
- 'tree',
- 'trend-down',
- 'trend-up',
- 'trip-report',
- 'ui-notifications',
- 'umbrella',
- 'underline-text',
- 'undo',
- 'unfavorite',
- 'unlocked',
- 'unpaid-leave',
- 'unwired',
- 'up',
- 'upload',
- 'upload-to-cloud',
- 'upstacked-chart',
- 'user-edit',
- 'user-settings',
- 'value-help',
- 'vds-file',
- 'vehicle-repair',
- 'vertical-bar-chart',
- 'vertical-bar-chart-2',
- 'vertical-bullet-chart',
- 'vertical-grip',
- 'vertical-stacked-chart',
- 'vertical-waterfall-chart',
- 'video',
- 'visits',
- 'waiver',
- 'wallet',
- 'warning',
- 'warning2',
- 'washing-machine',
- 'weather-proofing',
- 'web-cam',
- 'widgets',
- 'windows-doors',
- 'work-history',
- 'workflow-tasks',
- 'world',
- 'wounds-doc',
- 'wrench',
- 'write-new',
- 'write-new-document',
- 'x-ray',
- 'zoom-in',
- 'zoom-out']
+ 'enum': listOfIcons
}
]}>
@@ -761,6 +85,7 @@ export const ListGroupComponent = () => {
-
+
+
);
};
diff --git a/src/LocalizationEditor/LocalizationEditor.Component.js b/src/LocalizationEditor/LocalizationEditor.Component.js
index 8c4b00ab1..1c70325c9 100644
--- a/src/LocalizationEditor/LocalizationEditor.Component.js
+++ b/src/LocalizationEditor/LocalizationEditor.Component.js
@@ -1,74 +1,38 @@
import { LocalizationEditor } from '../';
import path from 'path';
import React from 'react';
-import { DocsText, DocsTile, Header, Import, Properties, Separator } from '../_playground';
+import { ComponentPage, Example } from '../_playground';
export const LocalizationEditorComponent = () => {
- const localizationEditorCode = `
-
-
`;
-
- const localizationEditorTextareaCode = `
`;
-
return (
-
-
-
-
-
-
-
-
-
-
-
Localization Editor with Input
-
-
-
-
-
-
{localizationEditorCode}
-
-
-
-
Localization Editor with Textarea
-
+
+
+
+
+
+
+
+
+
+
+
{
{ placeholder: 'Enter Label', language: 'PL' }
]}
textarea />
-
-
{localizationEditorTextareaCode}
-
+
+
+
);
};
diff --git a/src/Menu/Menu.Component.js b/src/Menu/Menu.Component.js
index 8e009c60b..eaf6ba61d 100644
--- a/src/Menu/Menu.Component.js
+++ b/src/Menu/Menu.Component.js
@@ -2,98 +2,20 @@ import { Link } from 'react-router-dom';
import { Menu } from '../';
import path from 'path';
import React from 'react';
-import { Description, DocsText, DocsTile, Header, Import, Properties, Separator } from '../_playground';
+import { ComponentPage, Example } from '../_playground';
export const MenuComponent = () => {
- const menuCode = `
`;
-
- const menuGroupCode = `
`;
-
- const menuSeparatorCode = `
`;
-
- const menuAddonBeforeCode = `
`;
-
return (
-
-
-
- The **Menu** is the listing structure with optional headers to create menus. Commonly used as the
+
-
+ component.`}
+ sourceModulePath={path.join(__dirname, './Menu')}
+ title='Menu'>
-
-
-
-
-
-
- Menu
- The basic stucture of a menu.
-
+
-
- {menuCode}
-
+
- Menu w/ Group
- Menu with grouped sub-menus and group headers.
-
+
-
- {menuGroupCode}
-
+
- Menu w/ Separator
- Menu items with horizontal line as separator.
-
+
-
- {menuSeparatorCode}
-
+
- Menu w/ Addon Before
- Menu items with an add-on before.
-
+
-
- {menuAddonBeforeCode}
-
+
+
+
);
};
diff --git a/src/Modal/Modal.Component.js b/src/Modal/Modal.Component.js
index 19d094648..390c83561 100644
--- a/src/Modal/Modal.Component.js
+++ b/src/Modal/Modal.Component.js
@@ -1,6 +1,6 @@
import path from 'path';
import { Button, Modal } from '../';
-import { Description, DocsText, DocsTile, Header, Import, Properties, Separator } from '../_playground';
+import { ComponentPage, Example } from '../_playground';
import React, { Component } from 'react';
export class ModalComponent extends Component {
@@ -17,70 +17,6 @@ export class ModalComponent extends Component {
this.txtEmailRef = React.createRef();
}
- informationModalCode = `
-
- The new product have been added to your catalog.
-
-
- Automatic Product ID: PD-3465334
-
-
- Expiration date: 13/03/2018
-
-
-
-`;
-
- confirmationModalCode = `
-
-
-
- }>
-
- Do you want to delete item X?
-
-`;
-
- formModalCode = `
-
-
-
- }>
-
-`;
-
// show / hide information modal
showHideModal = () => {
this.setState(prevState => ({
@@ -137,116 +73,104 @@ export class ModalComponent extends Component {
render() {
return (
-
-
-
- The **Modal** is a container generally displayed in response to an action. It is used for short forms,
- confirmation messages or to display contextual information that does not require a page.
-
- To display the **Modal** dialog, pass a boolean value to the `show` property of the component. It is
- recommended to store this value as a state property in the parent control or application.
-
-
-
-
-
-
-
-
-
-
Informational Modal
-
- This is used to present information to the user when the **Alert** component
- doesn’t fit all the information.
-
-
-
-
-
- The new product have been added to your catalog.
-
-
- Automatic Product ID: PD-3465334
-
-
- Expiration date: 13/03/2018
-
-
-
-
-
-
{this.informationModalCode}
-
-
-
-
Confirmation Modal
-
- This is used to confirm with the user before continuing with a destructive or
- complex action. In this case, the **Modal** has action buttons at the bottom.
-
-
-
-
-
-
-
- }
- onClose={this.showHideConfirmModal}
- show={this.state.bShowComfirmModal}
- title='Delete'>
-
- Do you want to delete item X?
-
-
-
-
{this.confirmationModalCode}
-
-
-
-
Form Modal
-
- This is used for short forms in order to collect information from the user.
-
-
-
-
-
-
-
- }
- onClose={this.showHideFormModal}
- show={this.state.bShowFormModal}
- title='Invite user'>
-
-
-
-
+
+
+
+
+
+
+
+ The new product have been added to your catalog.
+
+
+ Automatic Product ID: PD-3465334
+
+
+ Expiration date: 13/03/2018
+
+
-
+
+
+
+
+
+
+
+ }
+ onClose={this.showHideConfirmModal}
+ show={this.state.bShowComfirmModal}
+ title='Delete'>
+
+ Do you want to delete item X?
+
+
+
+
+
+
+
+
+ }
+ onClose={this.showHideFormModal}
+ show={this.state.bShowFormModal}
+ title='Invite user'>
+
+
+
-
-
-
-
-
-
-
-
-
-
Default
-
- When input receives focus, it will show list of items to select.
-
-
-
-
-
-
-
{this.multiInputCode}
-
-
-
-
Compact Style
-
-
-
-
-
-
{this.multiInputCompactCode}
-
-
-
- **Pagination** is commonly used for tables and tiles. It allows
+
-
-
-
-
-
+ the \`onClick\` method.`}
+ sourceModulePath={path.join(__dirname, './Pagination')}
+ title='Pagination'>
-
-
- First Page
-
- When the first page is active, the Back arrow should be
- disabled.
-
-
+
-
-
- {''}
-
-
+
- Last Page
-
- When the last page is active, the Next arrow should be disabled.
-
-
+
-
-
- {
- ''
- }
-
-
+
- Items per Page
- Set how many items per page.
-
+
-
-
- {
- ''
- }
-
-
-
+
- Set Initial Page
- Set initial page to be selected.
-
+
-
-
- {
- ''
- }
-
-
+
- Hide Total
-
- Only show page numbers, Previous and Next controls.
-
-
+
-
-
- {
- ''
- }
-
-
+
- Total Text
- Customize text to show next to item total.
-
+
-
-
- {' '}
- {
- ''
- }
-
- Panel Filters
-
- Color}
- body={
-
- }
- noArrow
- />
- Size}
- body={
-
- }
- noArrow
- />
-
-
- Panel Body
-
-
-
-
-
-
- Tile Description
-
-
-
- Bibendum
- Lorem
- Dolor
- Filter
-
- Panel Footer
-`;
-
- const panelGrid3Code = `
-
- Panel
-
-
- Panel
-
-
- Panel
-
-
- Panel
-
-
- Panel
-
-`;
-
- const panelNogapCode = `
-
- Panel
-
-
- Panel
-
-
- Panel
-
-
- Panel
-
-
- Panel
-
-`;
-
- const panelGrid2ColsCode = `
-
- Panel
-
-
- Panel
-
-
- Panel
-
-
- Panel
-
-`;
-
- const panelGrid4ColsCode = `
-
- Panel
-
-
- Panel
-
-
- Panel
-
-
- Panel
-
-
- Panel
-
-
- Panel
-
-
- Panel
-
-
- Panel
-
-`;
-
- const panelGridColSpanCode = `
-
- Panel with colSpan=2
-
-
- Panel
-
-
- Panel
-
-
- Panel
-
-
- Panel
-
-
-
- Panel with colSpan=3
-
-
- Panel
-
-
- Panel
-
-
- Panel
-
-
-
- Panel with colSpan=4
-
-
- Panel
-
-
- Panel
-
-
-
- Panel with colSpan=5
-
-
- Panel
-
-
-
- Panel with colSpan=6
-
-`;
-
return (
-
-
-
+
-
-
-
-
-
-
-
+
@@ -268,13 +72,10 @@ export const PanelComponent = () => {
Panel Footer
-
- {panelExampleCode}
+
-
-
- Default Panel Grid (3 columns)
-
+
Panel
@@ -292,13 +93,10 @@ export const PanelComponent = () => {
Panel
-
- {panelGrid3Code}
-
-
+
- Panel Grid with no margins between the panels
-
+
Panel
@@ -316,13 +114,10 @@ export const PanelComponent = () => {
Panel
-
- {panelNogapCode}
+
-
-
- Panel Grid with 2 columns
-
+
Panel
@@ -337,13 +132,10 @@ export const PanelComponent = () => {
Panel
-
- {panelGrid2ColsCode}
-
-
+
- Panel Grid with 4 columns
-
+
Panel
@@ -370,13 +162,10 @@ export const PanelComponent = () => {
Panel
-
- {panelGrid4ColsCode}
+
-
-
- Panel Grid with column span
-
+
Panel with colSpan=2
@@ -428,8 +217,8 @@ export const PanelComponent = () => {
Panel with colSpan=6
-
- {panelGridColSpanCode}
-
-
-
- The **Popover** is a wrapping component that accepts a "control" as well as a "body". A control can be
+
-
+ others to prevent multiple layers and collisions of several popovers.`}
+ sourceModulePath={path.join(__dirname, './Popover')}
+ title='Popover'>
-
-
-
-
-
-
- Popover Example
-
+
{
id='jhqD0558'
noArrow />
-
- {popoverCode}
-
-
-
-
-
+
-
-
-
-
-
+
this.getInputValue(term)}
@@ -116,9 +65,9 @@ searchData = [
placeholder='Enter a fruit'
searchList={this.searchData} />
-
- {this.searchInputCode}
-
-
-
- The **Shellbar** offers consistent, responsive navigation across all products and applications. Includes
+
-
-
-
-
-
-
-
-
- Basic Shellbar
-
- This example shows the minimum Shellbar for a single application product with only user settings. If
- no user thumbnail is available then display initials.
-
-
+ some things to know.`}
+ sourceModulePath={path.join(__dirname, './Shellbar')}
+ title='Shellbar'>
+
+
}
productTitle='Corporate Portal'
profile={this.profile1}
profileMenu={this.profileMenu} />
-
- {this.simpleShellbarExampleCode}
-
-
+
- Product Menu and Search
-
- This example includes the product menu for navigating to applications within the product and shows a
- search box.
-
-
+
-
- {this.menuAndSearchShellbarExampleCode}
+
-
-
- Links with collapsible menu, CoPilot and Product Switcher
-
- When a product has multiple links, the product links should collapse into an overflow menu on mobile
- screens. All actions, except for the user menu, should be collapsed.
-
-
+
-
- {this.shellbarExampleCode}
-
-
-
- The left navigation can always display or expand/collapse using the menu icon within the global
- navigation.
-
-
-
-
-
-
+
-
-
- Side Navigation with one level
-
+
@@ -267,14 +39,11 @@ export const SideNavigationComponent = () => {
url='#' />
-
- {sideNavOneLevelCode}
-
-
+
- Side navigation with titles
- Use this to group navigation. Titles are not clickable.
-
+
@@ -342,17 +111,12 @@ export const SideNavigationComponent = () => {
-
- {sideNavWithTitlesCode}
-
-
+
- Side navigation with multiple levels
-
- Use this when there is more than one level of hierarchy in the left navigation. Each level can be
- expanded and collapsed.
-
-
+
@@ -416,13 +180,10 @@ export const SideNavigationComponent = () => {
url='#' />
-
- {sideNavMultiLevelCode}
+
-
-
- Side navigation with icons
-
+
@@ -459,18 +220,13 @@ export const SideNavigationComponent = () => {
url='#' />
-
- {sideNavWithIconsCode}
-
-
+
- Side navigation collapsed with icon.
-
- The user can identify which level they are on based on the icon displayed as selected when the
- navigation is collapsed. Note that the suggested use is when there is only one level of navigation as
- the user can only see one level of navigation when collapsed.
-
-
+
@@ -497,8 +253,8 @@ export const SideNavigationComponent = () => {
url='#' />
-
- {sideNavCollapsedCode}
-
-
-
- A **Table** is a set of tabular data. Line items can support `data`, `images` and `actions`.
-
-
-
-
-
-
+
-
-
- Simple Table
-
- This is an example of a **Table** with simple cells, where the `rowData` is an array of strings.
-
-
+
{
rowData: ['Data 5', 'Data 6', 'Data 7', 'Data 8']
}
]} />
-
- {simpleTableCode}
-
-
+
- Rich Table
-
- This is an example of a **Table** with "rich" cells. The checkbox input can be used at the beginning of each
- row to allow for bulk actions. When more than three actions exist per row and/or space doesn’t allow for
- actions, a contextual menu can be substituted in order to display all actions in one menu.
-
-
+
, 'Avatar', 'email', 'First Name', 'Last Name', 'Date', ' ']}
tableData={[
@@ -264,8 +130,8 @@ export const TableComponent = () => {
]
}
]} />
-
- {richTableCode}
-
+
+
+
);
};
diff --git a/src/Tabs/Tabs.Component.js b/src/Tabs/Tabs.Component.js
index 46a1ce3e2..d6b18255c 100644
--- a/src/Tabs/Tabs.Component.js
+++ b/src/Tabs/Tabs.Component.js
@@ -1,46 +1,19 @@
import path from 'path';
import React from 'react';
-import { Description, DocsText, DocsTile, Header, Import, Properties, Separator } from '../_playground';
+import { ComponentPage, Example } from '../_playground';
import { Tab, TabGroup } from '../';
export const TabsComponent = () => {
- const tabGroupCode = `
-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
-
-
- Numquam libero id corporis odit animi voluptat, Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus quia tempore eligendi tempora repellat officia rerum laudantium, veritatis officiis asperiores ipsum nam, distinctio, dolor provident culpa voluptatibus esse deserunt animi?
-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
-
-
- Please review your shopping chart.
-
- `;
-
return (
-
-
-
- A **Tab Group** is a collection of **Tab** components. Each **Tab** is based on a folder
+
-
-
-
-
-
-
-
+ They should be ordered to create a visual hierarchy based on priority.`}
+ sourceModulePath={path.join(__dirname, './Tabs')}
+ title='Tab Group'>
-
-
- Tab Group
-
-
+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
@@ -56,8 +29,8 @@ export const TabsComponent = () => {
Please review your shopping chart.
-
- {tabGroupCode}
- Tile Description
-
-`;
- const mediaTileCode = `
-
-
-
-
-
-
-
-
-
-
-
-
- Tile Description
-
-
-
-
-
-
-
-
- Tile Description
-
-`;
-
- const actionsTileCode = `
-
-
- }
- body={
-
- }
- />
-
-`;
-
- const productTileCode = `
-
-
- Tile Description
-
-
-
-
-
-
- Tile Description
-
-`;
- const tileGridCode = `
-
-
- Tile Description
-
-
-
-
-
-
-
- Tile Description
-
-
-
-
- Tile Description
-
-
-
-
-
-
-
-
-
-
-
- Tile Description
-
-
-
-
- Tile Description
-
-
-`;
-
return (
-
-
-
- A **Tile** can be used to display information in a simple container format.
- A collection of tiles can be displayed using **TileGrid**.
-
-
-
-
-
-
-
-
-
-
Simple Tile
-
+
+
+
Tile Description
-
-
{simpleTileCode}
+
-
-
-
Media Tile
-
-
-
-
-
-
-
-
-
-
-
-
-
- Tile Description
-
-
-
-
-
-
-
-
- Tile Description
-
-
-
-
{mediaTileCode}
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Tile Description
+
+
+
+
+
+
+
+
+ Tile Description
+
+
+
-
Actions Tile
-
+
@@ -184,13 +71,10 @@ export const TileComponent = () => {
control={} />
-
-
{actionsTileCode}
-
-
+
-
Product Tile
-
+
@@ -208,15 +92,11 @@ export const TileComponent = () => {
-
-
{productTileCode}
+
-
-
-
-
Tile Grid Component
-
A **Tile Grid** is a collection of **Tiles** in a grid layout.
-
+
@@ -255,8 +135,7 @@ export const TileComponent = () => {
-
-
{tileGridCode}
+
@@ -283,6 +162,7 @@ export const TileComponent = () => {
-
-
-
- The **Time** component is used for a single time value. Multiple components can be used in the **Time Picker**
+
-
+ It is rarely used on its own as a standalone component.`}
+ sourceModulePath={path.join(__dirname, './Time')}
+ title='Time'>
-
-
-
-
-
-
- {/* Default Clock */}
- Default
-
+
-
- {defaultTimeCode}
-
-
+
- {/* 12 hours Clock */}
- 12-Hour Clock
-
+
-
- {format12hoursTimeCode}
+
-
-
- {/* No Spinners Time */}
- Clock With No Spinners
-
+
-
- {noSpinnersTimeCode}
-
-
+
- {/* Hide Seconds */}
- Clock With No Seconds
-
+
-
- {noSecondsTimeCode}
+
-
-
- {/* Disabled State */}
- Disabled State
-
+
-
- {disabledStateTimeCode}
-
-
-
- The **Time Picker** allows the user to easily set a time using the **Time** component.
-
-
+
-
-
-
-
-
-
- Default
-
+
-
- {defaultTimeCode}
-
-
+
- 12-Hour Clock
-
+
-
- {format12hoursTimeCode}
+
-
-
- Time Picker With No Seconds
-
+
-
- {noSecondsTimeCode}
-
-
+
- Disabled State
-
+
-
- {disabledStateTimeCode}
-
-
-
- The **Toggle** component is used to activate or deactivate an element. It uses a visual metaphor that is known
+
-
-
-
-
-
-
-
-
- Toggle Sizes
- {toggleSizeDescription}
-
-
- Extra Small toggle
-
-
- Small toggle
-
- Normal toggle
-
- Large toggle
-
-
- {toggleCode}
-
-
-
- Disabled state
-
-
- Extra Small toggle
-
-
- Small toggle
-
-
- Normal toggle
-
-
- Large toggle
-
-
- {toggleDisabledCode}
-
+
+ Extra Small toggle
+
+
+ Small toggle
+
+ Normal toggle
+
+ Large toggle
+
+
+
+
+
+
+
+ Extra Small toggle
+
+
+ Small toggle
+
+
+ Normal toggle
+
+
+ Large toggle
+
+
+
+
+
);
};
diff --git a/src/Token/Token.Component.js b/src/Token/Token.Component.js
index 2d968f21b..35d1fdb3b 100644
--- a/src/Token/Token.Component.js
+++ b/src/Token/Token.Component.js
@@ -1,43 +1,29 @@
import path from 'path';
import React from 'react';
import { Token } from '../';
-import { Description, DocsText, DocsTile, Header, Import, Properties, Separator } from '../_playground';
+import { ComponentPage, Example } from '../_playground';
export const TokenComponent = () => {
- const tokenCode = `Bibendum
-Lorem
-Dolor
-Filter`;
-
const closeAction = (name) => alert(`close ${name}! You can work with the event itself using the callback.`);
- const tagsNames = ['Bibendum', 'Lorem', 'Dolor', 'Filter'];
return (
-
-
-
-
- A **Token** is used to represent contextual information. It can be useful to show
- applied filters, selected values for a form field or object metadata.
-
-
-
-
-
-
-
-
-
-
+
+
+
- {
- tagsNames.map((name) => {
- return closeAction(name, e)} key={name}>{name};
- })
- }
+ closeAction('Bibendum', e)}>Bibendum
+ closeAction('Lorem', e)}>Lorem
+ closeAction('Dolor', e)}>Dolor
+ closeAction('Filter', e)}>Filter
-
-
{tokenCode}
-
-
-
- A **Tree View** is used to display data in a visual hierarchy. Items that contain additional items
+
-
-
-
-
-
-
-
+ and leaves, a tree is similar to a list.`}
+ sourceModulePath={path.join(__dirname, './TreeView')}
+ title='Tree View'>
- Simple TreeView
-
- This is an example of a simple tree view.
-
-
+
@@ -266,16 +66,11 @@ export const TreeViewComponent = () => {
-
- {simpleTreeViewCode}
+
-
-
- Complex TreeView
-
- This is an example of a tree view with a header, multiple levels, multiple columns and actions.
-
-
+
Column Header 1
@@ -384,16 +179,11 @@ export const TreeViewComponent = () => {
-
- {treeViewCode}
-
-
+
- Rich TreeView
-
- This is an example of a tree view with "rich" cells.
-
-
+
Column Header 1
@@ -419,9 +209,8 @@ export const TreeViewComponent = () => {
-
- {treeViewCodeRich}
-
-
-
-
-
+
+
+
+
+
+
+ {routes.map(route => {
+ return (
+
+ );
+ })}
+
+
+
-
-
-
-
- {routes.map(route => {
- return (
-
- );
- })}
-
-
-
-
+
);
}
diff --git a/src/_playground/_ScrollToTop.js b/src/_playground/_ScrollToTop.js
new file mode 100644
index 000000000..a0fe42e76
--- /dev/null
+++ b/src/_playground/_ScrollToTop.js
@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { withRouter } from 'react-router';
+
+class ScrollToTop extends React.Component {
+ componentDidUpdate(prevProps) {
+ if (this.props.location.pathname !== prevProps.location.pathname) {
+ document.getElementById('frDocs-Content').scrollTo(0, 0);
+ }
+ }
+
+ render() {
+ return this.props.children;
+ }
+}
+
+ScrollToTop.propTypes = {
+ children: PropTypes.node,
+ location: PropTypes.object
+};
+
+export default withRouter(ScrollToTop);
diff --git a/src/_playground/documentation/Contents/Contents.js b/src/_playground/documentation/Contents/Contents.js
new file mode 100644
index 000000000..9cea21ce2
--- /dev/null
+++ b/src/_playground/documentation/Contents/Contents.js
@@ -0,0 +1,31 @@
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Separator from '../Separator/Separator';
+
+const Contents = ({ className }) => {
+ const classes = classnames('js-toc', 'toc', className);
+
+ return (
+
+
+ Contents
+
+
+ );
+};
+
+Contents.propTypes = {
+ className: PropTypes.string
+};
+
+Contents.tocOptions = {
+ tocSelector: '.js-toc',
+ contentSelector: '.frDocs-Content',
+ headingSelector: 'h2.frDocs-Heading, h3.frDocs-Heading, h4.frDocs-Heading',
+ orderedList: true,
+ scrollContainer: '.frDocs-Content',
+ collapseDepth: 3
+};
+
+export default Contents;
diff --git a/src/_playground/documentation/Example/Example.js b/src/_playground/documentation/Example/Example.js
new file mode 100644
index 000000000..09a16f2d1
--- /dev/null
+++ b/src/_playground/documentation/Example/Example.js
@@ -0,0 +1,49 @@
+import Heading from '../Heading/Heading';
+import PropTypes from 'prop-types';
+import React from 'react';
+import reactElementToJSXString from 'react-element-to-jsx-string';
+import { Description, DocsText, DocsTile } from '../../';
+
+class Example extends React.Component {
+ render() {
+ const {
+ centered,
+ children,
+ description,
+ omitCodeSample,
+ title
+ } = this.props;
+
+ const element = React.Children.only(children);
+
+ return (
+
+ {title}
+ {description && {description}}
+
+ {element}
+
+ {!omitCodeSample &&
+
+
+ {reactElementToJSXString(element, {
+ showDefaultProps: false
+ })}
+
+
+
+ }
+
+ );
+ }
+}
+
+Example.propTypes = {
+ title: PropTypes.string.isRequired,
+ centered: PropTypes.bool,
+ children: PropTypes.node,
+ description: PropTypes.string,
+ omitCodeSample: PropTypes.bool
+};
+
+export default Example;
diff --git a/src/_playground/documentation/Header/Header.js b/src/_playground/documentation/Header/Header.js
index 9458232d6..20c37b50f 100644
--- a/src/_playground/documentation/Header/Header.js
+++ b/src/_playground/documentation/Header/Header.js
@@ -1,19 +1,11 @@
import PropTypes from 'prop-types';
import React from 'react';
-import { repository } from '../../../../package.json';
const Header = (props) => {
const { children } = props;
return (
-
-
-
{children}
diff --git a/src/_playground/documentation/Heading/Heading.js b/src/_playground/documentation/Heading/Heading.js
new file mode 100644
index 000000000..5fb881207
--- /dev/null
+++ b/src/_playground/documentation/Heading/Heading.js
@@ -0,0 +1,15 @@
+import CustomPropTypes from '../../../utils/CustomPropTypes/CustomPropTypes';
+import { makeSafeId } from '../utils/makeSafeId';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const Heading = ({ children, level }) => {
+ return React.createElement(`h${level}`, { className: 'frDocs-Heading', id: makeSafeId(children) }, children);
+};
+
+Heading.propTypes = {
+ children: PropTypes.string.isRequired,
+ level: CustomPropTypes.range(1, 6).isRequired
+};
+
+export default Heading;
diff --git a/src/_playground/documentation/Home/Home.js b/src/_playground/documentation/Home/Home.js
index 6a9568341..e21cdafc5 100644
--- a/src/_playground/documentation/Home/Home.js
+++ b/src/_playground/documentation/Home/Home.js
@@ -1,15 +1,12 @@
-import Header from '../Header/Header';
-import MarkdownImporter from '../Markdown/MarkdownImporter';
+import MarkdownPage from '../Template/MarkdownPage';
import React from 'react';
import Readme from './README.md';
-const Home = () => {
-
+export const Home = () => {
return (
-
-
-
-
+
);
};
diff --git a/src/_playground/documentation/Import/Import.js b/src/_playground/documentation/Import/Import.js
index 0c2cd6438..7c5e840d6 100644
--- a/src/_playground/documentation/Import/Import.js
+++ b/src/_playground/documentation/Import/Import.js
@@ -6,12 +6,16 @@ import React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter';
const Import = ({ sourceModulePath }) => {
+ if (!sourceModulePath) {
+ return null;
+ }
+
// remove everything up until the last forward slash and the file extension.
const importPath = sourceModulePath.replace(/^(.*[\\\/])/, '').replace('.js', '');
return (
{`import { ${Object.keys(getSourceModule(sourceModulePath)).sort().join(', ')} } from '${packageJson.name}/lib/${importPath}';`}
@@ -20,7 +24,7 @@ const Import = ({ sourceModulePath }) => {
};
Import.propTypes = {
- sourceModulePath: PropTypes.string.isRequired
+ sourceModulePath: PropTypes.string
};
export default Import;
diff --git a/src/_playground/documentation/Markdown/MarkdownImporter.js b/src/_playground/documentation/Markdown/MarkdownImporter.js
index f9a7cb64b..b17fc0f77 100644
--- a/src/_playground/documentation/Markdown/MarkdownImporter.js
+++ b/src/_playground/documentation/Markdown/MarkdownImporter.js
@@ -9,19 +9,36 @@ class MarkdownImporter extends React.Component {
this.state = { markdown: '' };
}
+ componentDidUpdate() {
+ // since this fetches the file contents asynchronously, we need to notify the caller of an update
+ this.props.onUpdate();
+ }
+
componentWillMount() {
// Get the contents from the Markdown file and put them in the React state, so we can reference it in render() below.
- fetch(this.props.source).then(res => res.text()).then(text => this.setState({ markdown: text }));
+ fetch(this.props.sourceFile).then(res => res.text()).then(text => this.setState({ markdown: text }));
}
render() {
+ const { sourceFile, ...otherProps } = this.props;
const { markdown } = this.state;
- return ();
+
+ return (
+
+ );
}
}
MarkdownImporter.propTypes = {
- source: PropTypes.string
+ sourceFile: PropTypes.string,
+ onUpdate: PropTypes.func
+};
+
+MarkdownImporter.defaultProps = {
+ onUpdate: () => {}
};
export default MarkdownImporter;
diff --git a/src/_playground/documentation/Playground/Playground.js b/src/_playground/documentation/Playground/Playground.js
index 07d3b4760..64b9676f8 100644
--- a/src/_playground/documentation/Playground/Playground.js
+++ b/src/_playground/documentation/Playground/Playground.js
@@ -1,6 +1,7 @@
import { Alert } from '../../../';
import { Button } from '../../../';
import { Dropdown } from '../../../';
+import Heading from '../Heading/Heading';
import { Icon } from '../../../';
import { Identifier } from '../../../';
import { Image } from '../../../';
@@ -559,12 +560,15 @@ class Playground extends Component {
}
return (
-
-
{componentToGenerate}
-
-
{data}
+
+ Playground
+
+
{componentToGenerate}
+
+
);
}
}
diff --git a/src/_playground/documentation/Properties/Properties.js b/src/_playground/documentation/Properties/Properties.js
index 3212740d8..963fa6f14 100644
--- a/src/_playground/documentation/Properties/Properties.js
+++ b/src/_playground/documentation/Properties/Properties.js
@@ -1,16 +1,21 @@
import getSourceModule from '../utils/getSourceModule';
+import Heading from '../Heading/Heading';
import PropertyTable from './_PropertyTable';
import PropTypes from 'prop-types';
import React from 'react';
const Properties = ({ sourceModulePath }) => {
+ if (!sourceModulePath) {
+ return null;
+ }
+
const sourceModule = getSourceModule(sourceModulePath);
const componentNames = Object.keys(sourceModule).sort();
return (
- Properties
+ Properties
{componentNames.map((name, index) => {
const component = sourceModule[name];
const subcomponentNames = Object.keys(component)
@@ -42,7 +47,7 @@ const Properties = ({ sourceModulePath }) => {
};
Properties.propTypes = {
- sourceModulePath: PropTypes.string.isRequired
+ sourceModulePath: PropTypes.string
};
export default Properties;
diff --git a/src/_playground/documentation/Properties/_PropertyTable.js b/src/_playground/documentation/Properties/_PropertyTable.js
index 7708d9835..ae40b77e6 100644
--- a/src/_playground/documentation/Properties/_PropertyTable.js
+++ b/src/_playground/documentation/Properties/_PropertyTable.js
@@ -1,4 +1,5 @@
import { defaultPropDescriptions } from './defaults';
+import Heading from '../Heading/Heading';
import PropertyDefault from './_PropertyDefault';
import PropertyDescription from './_PropertyDescription';
import PropertyType from './_PropertyType';
@@ -43,7 +44,7 @@ const PropertyTable = ({ title, propTypes, defaultProps, propDescriptions }) =>
return (
- {title}
+ {title && {title}}
PropertyTable.displayName = 'PropertyTable';
PropertyTable.propTypes = {
- title: PropTypes.string.isRequired,
defaultProps: PropTypes.object,
propDescriptions: PropTypes.object,
- propTypes: PropTypes.object
+ propTypes: PropTypes.object,
+ title: PropTypes.string
};
export default PropertyTable;
diff --git a/src/_playground/documentation/Separator/Separator.js b/src/_playground/documentation/Separator/Separator.js
index 427c20e2f..4a2c28197 100644
--- a/src/_playground/documentation/Separator/Separator.js
+++ b/src/_playground/documentation/Separator/Separator.js
@@ -1,8 +1,8 @@
import React from 'react';
-const Separator = () => {
+const Separator = (props) => {
return (
-
+
);
};
diff --git a/src/_playground/documentation/Template/ComponentPage.js b/src/_playground/documentation/Template/ComponentPage.js
new file mode 100644
index 000000000..461d85429
--- /dev/null
+++ b/src/_playground/documentation/Template/ComponentPage.js
@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import tocbot from 'tocbot';
+import { Contents, Description, Header, Heading, Import, Properties, Separator } from '..';
+
+class ComponentPage extends React.Component {
+ componentDidMount() {
+ tocbot.init(Contents.tocOptions);
+ }
+
+ componentDidUpdate() {
+ tocbot.refresh();
+ }
+
+ componentWillUnmount() {
+ tocbot.destroy();
+ }
+
+ render() {
+ const {
+ children,
+ description,
+ sourceModulePath,
+ title
+ } = this.props;
+
+ return (
+
+
+ {description}
+
+
+
+ Examples
+ {children}
+
+
+
+ );
+ }
+}
+
+ComponentPage.propTypes = {
+ title: PropTypes.string.isRequired,
+ children: PropTypes.node,
+ description: PropTypes.string,
+ sourceModulePath: PropTypes.string
+};
+
+export default ComponentPage;
diff --git a/src/_playground/documentation/Template/MarkdownPage.js b/src/_playground/documentation/Template/MarkdownPage.js
new file mode 100644
index 000000000..913b266fb
--- /dev/null
+++ b/src/_playground/documentation/Template/MarkdownPage.js
@@ -0,0 +1,61 @@
+import MarkdownImporter from '../Markdown/MarkdownImporter';
+import PropTypes from 'prop-types';
+import React from 'react';
+import tocbot from 'tocbot';
+import { Contents, Description, Header, Heading, Separator } from '../';
+
+class MarkdownPage extends React.Component {
+ componentDidMount() {
+ tocbot.init(Contents.tocOptions);
+ }
+
+ componentDidUpdate() {
+ tocbot.refresh();
+ }
+
+ componentWillUnmount() {
+ tocbot.destroy();
+ }
+
+ refreshTOC = () => {
+ tocbot.refresh();
+ };
+
+ render() {
+ const {
+ description,
+ sourceFile,
+ title
+ } = this.props;
+
+ // we will pass our own heading renderer so we can inject id values for the TOC
+ return (
+
+ {title && }
+ {description && {description}}
+
+
+ {
+ // H1 elements should be skipped if `title` is passed
+ if (title && props.level === 1) {
+ return null;
+ }
+ return {children[0].props.value};
+ })
+ }}
+ sourceFile={sourceFile} />
+
+ );
+ }
+}
+
+MarkdownPage.propTypes = {
+ description: PropTypes.string,
+ sourceFile: PropTypes.string,
+ title: PropTypes.string
+};
+
+export default MarkdownPage;
diff --git a/src/_playground/documentation/index.js b/src/_playground/documentation/index.js
index 3d95746cd..93cb3cb68 100644
--- a/src/_playground/documentation/index.js
+++ b/src/_playground/documentation/index.js
@@ -1,6 +1,11 @@
+export { default as ComponentPage } from './Template/ComponentPage';
+export { default as Contents } from './Contents/Contents';
export { default as Description } from './Description/Description';
+export { default as Example } from './Example/Example';
export { default as Header } from './Header/Header';
+export { default as Heading } from './Heading/Heading';
export { default as Import } from './Import/Import';
+export { default as MarkdownPage } from './Template/MarkdownPage';
export { default as Playground } from './Playground/Playground';
export { default as Properties } from './Properties/Properties';
export { default as Separator } from './Separator/Separator';
diff --git a/src/_playground/documentation/utils/makeSafeId.js b/src/_playground/documentation/utils/makeSafeId.js
new file mode 100644
index 000000000..3b2ee959b
--- /dev/null
+++ b/src/_playground/documentation/utils/makeSafeId.js
@@ -0,0 +1,8 @@
+export const makeSafeId = (name) => {
+ return name.replace(/[^a-z0-9]/g, (s) => {
+ var c = s.charCodeAt(0);
+ if (c === 32) return '-';
+ if (c >= 65 && c <= 90) return '_' + s.toLowerCase();
+ return '__' + ('000' + c.toString(16)).slice(-4);
+ });
+};
diff --git a/src/_playground/index.js b/src/_playground/index.js
index 5ce81e718..38640f8ab 100644
--- a/src/_playground/index.js
+++ b/src/_playground/index.js
@@ -5,11 +5,16 @@ import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
+export { default as ComponentPage } from './documentation/Template/ComponentPage';
+export { default as Contents } from './documentation/Contents/Contents';
export { default as Description } from './documentation/Description/Description';
export { default as DocsText } from './documentation/DocsText/DocsText';
export { default as DocsTile } from './documentation/DocsTile/DocsTile';
+export { default as Example } from './documentation/Example/Example';
export { default as Header } from './documentation/Header/Header';
+export { default as Heading } from './documentation/Heading/Heading';
export { default as Import } from './documentation/Import/Import';
+export { default as MarkdownPage } from './documentation/Template/MarkdownPage';
export { default as Playground } from './documentation/Playground/Playground';
export { default as Properties } from './documentation/Properties/Properties';
export { default as Separator } from './documentation/Separator/Separator';
diff --git a/src/utils/listOfIcons.js b/src/utils/listOfIcons.js
new file mode 100644
index 000000000..54bcb54f1
--- /dev/null
+++ b/src/utils/listOfIcons.js
@@ -0,0 +1,623 @@
+export const listOfIcons = [
+ 'accelerated',
+ 'accept',
+ 'accidental-leave',
+ 'account',
+ 'accounting-document-verification',
+ 'action',
+ 'action-settings',
+ 'activate',
+ 'activities',
+ 'activity-2',
+ 'activity-assigned-to-goal',
+ 'activity-individual',
+ 'activity-items',
+ 'add',
+ 'add-activity',
+ 'add-activity-2',
+ 'add-contact',
+ 'add-coursebook',
+ 'add-document',
+ 'add-equipment',
+ 'add-favorite',
+ 'add-filter',
+ 'add-photo',
+ 'add-process',
+ 'add-product',
+ 'address-book',
+ 'addresses',
+ 'alert',
+ 'along-stacked-chart',
+ 'alphabetical-order',
+ 'appointment',
+ 'appointment-2',
+ 'approvals',
+ 'area-chart',
+ 'arobase',
+ 'arrow-bottom',
+ 'arrow-down',
+ 'arrow-left',
+ 'arrow-right',
+ 'arrow-top',
+ 'attachment',
+ 'attachment-audio',
+ 'attachment-e-pub',
+ 'attachment-html',
+ 'attachment-photo',
+ 'attachment-text-file',
+ 'attachment-video',
+ 'attachment-zip-file',
+ 'back-to-top',
+ 'background',
+ 'badge',
+ 'bar-chart',
+ 'bar-code',
+ 'basket',
+ 'batch-payments',
+ 'bbyd-active-sales',
+ 'bbyd-dashboard',
+ 'bed',
+ 'begin',
+ 'bell',
+ 'blank-tag',
+ 'blank-tag-2',
+ 'bo-strategy-management',
+ 'bold-text',
+ 'bookmark',
+ 'border',
+ 'broken-link',
+ 'bubble-chart',
+ 'building',
+ 'bullet-text',
+ 'burglary',
+ 'bus-public-transport',
+ 'business-by-design',
+ 'business-card',
+ 'business-objects-experience',
+ 'business-objects-explorer',
+ 'business-objects-mobile',
+ 'business-one',
+ 'calendar',
+ 'call',
+ 'camera',
+ 'cancel',
+ 'cancel-maintenance',
+ 'cancel-share',
+ 'capital-projects',
+ 'car-rental',
+ 'card',
+ 'cargo-train',
+ 'cart',
+ 'cart-2',
+ 'cart-3',
+ 'cart-4',
+ 'cart-5',
+ 'cart-approval',
+ 'cart-full',
+ 'cause',
+ 'chain-link',
+ 'chalkboard',
+ 'chart-axis',
+ 'chart-table-view',
+ 'Chart-Tree-Map',
+ 'check-availability',
+ 'checklist',
+ 'checklist-2',
+ 'checklist-item',
+ 'checklist-item-2',
+ 'chevron-phase',
+ 'chevron-phase-2',
+ 'choropleth-chart',
+ 'circle-task',
+ 'circle-task-2',
+ 'citizen-connect',
+ 'clear-filter',
+ 'clinical-order',
+ 'clinical-tast-tracker',
+ 'close-command-field',
+ 'cloud',
+ 'co',
+ 'collaborate',
+ 'collapse',
+ 'collapse-group',
+ 'collections-insight',
+ 'collections-management',
+ 'collision',
+ 'color-fill',
+ 'column-chart-dual-axis',
+ 'comment',
+ 'commission-check',
+ 'company-view',
+ 'compare',
+ 'compare-2',
+ 'competitor',
+ 'complete',
+ 'connected',
+ 'contacts',
+ 'copy',
+ 'course-book',
+ 'course-program',
+ 'create',
+ 'create-entry-time',
+ 'create-form',
+ 'create-leave-request',
+ 'create-session',
+ 'credit-card',
+ 'crm-sales',
+ 'crm-service-manager',
+ 'crop',
+ 'crossed-line-chart',
+ 'curriculum',
+ 'cursor',
+ 'customer',
+ 'customer-and-contacts',
+ 'customer-and-supplier',
+ 'customer-briefing',
+ 'customer-financial-fact-sheet',
+ 'customer-history',
+ 'customer-order-entry',
+ 'customer-view',
+ 'customize',
+ 'database',
+ 'date-time',
+ 'decision',
+ 'decline',
+ 'decrease-line-height',
+ 'delete',
+ 'detail-view',
+ 'developer-settings',
+ 'dimension',
+ 'disconnected',
+ 'discussion',
+ 'discussion-2',
+ 'dishwasher',
+ 'display',
+ 'display-more',
+ 'doc-attachment',
+ 'doctor',
+ 'document',
+ 'document-text',
+ 'documents',
+ 'donut-chart',
+ 'down',
+ 'download',
+ 'download-from-cloud',
+ 'draw-rectangle',
+ 'drill-down',
+ 'drill-up',
+ 'drop-down-list',
+ 'dropdown',
+ 'duplicate',
+ 'e-care',
+ 'e-learning',
+ 'eam-work-order',
+ 'edit',
+ 'edit-outside',
+ 'education',
+ 'electrocardiogram',
+ 'electronic-medical-record',
+ 'email',
+ 'email-read',
+ 'employee',
+ 'employee-approvals',
+ 'employee-lookup',
+ 'employee-pane',
+ 'employee-rejections',
+ 'end-user-experience-monitoring',
+ 'endoscopy',
+ 'energy-saving-lightbulb',
+ 'enter-more',
+ 'eraser',
+ 'error',
+ 'example',
+ 'excel-attachment',
+ 'exitfullscreen',
+ 'expand',
+ 'expand-group',
+ 'expense-report',
+ 'explorer',
+ 'factory',
+ 'fallback',
+ 'family-care',
+ 'family-protection',
+ 'favorite',
+ 'favorite-list',
+ 'fax-machine',
+ 'feed',
+ 'feeder-arrow',
+ 'filter',
+ 'filter-analytics',
+ 'filter-facets',
+ 'filter-fields',
+ 'flag',
+ 'flight',
+ 'fob-watch',
+ 'folder',
+ 'folder-blank',
+ 'folder-full',
+ 'form',
+ 'forward',
+ 'fridge',
+ 'full-screen',
+ 'full-stacked-chart',
+ 'full-stacked-column-chart',
+ 'functional-location',
+ 'future',
+ 'gantt-bars',
+ 'general-leave-request',
+ 'generate-shortcut',
+ 'geographic-bubble-chart',
+ 'globe',
+ 'goal',
+ 'goalseek',
+ 'grid',
+ 'group',
+ 'group-2',
+ 'header',
+ 'heading-1',
+ 'heading-2',
+ 'heading-3',
+ 'headset',
+ 'heating-cooling',
+ 'heatmap-chart',
+ 'hello-world',
+ 'hide',
+ 'hint',
+ 'history',
+ 'home',
+ 'home-share',
+ 'horizontal-bar-chart',
+ 'horizontal-bar-chart-2',
+ 'horizontal-bullet-chart',
+ 'horizontal-grip',
+ 'horizontal-stacked-chart',
+ 'horizontal-waterfall-chart',
+ 'hr-approval',
+ 'idea-wall',
+ 'image-viewer',
+ 'inbox',
+ 'incident',
+ 'incoming-call',
+ 'increase-line-height',
+ 'indent',
+ 'initiative',
+ 'inspect',
+ 'inspect-down',
+ 'inspection',
+ 'instance',
+ 'insurance-car',
+ 'insurance-house',
+ 'insurance-life',
+ 'internet-browser',
+ 'inventory',
+ 'ipad',
+ 'ipad-2',
+ 'iphone',
+ 'iphone-2',
+ 'it-host',
+ 'it-instance',
+ 'it-system',
+ 'italic-text',
+ 'jam',
+ 'journey-arrive',
+ 'journey-change',
+ 'journey-depart',
+ 'key',
+ 'key-user-settings',
+ 'kpi-corporate-performance',
+ 'kpi-managing-my-area',
+ 'lab',
+ 'laptop',
+ 'lateness',
+ 'lead',
+ 'lead-outdated',
+ 'leads',
+ 'learning-assistant',
+ 'legend',
+ 'less',
+ 'letter',
+ 'lightbulb',
+ 'line-chart',
+ 'line-chart-dual-axis',
+ 'line-chart-time-axis',
+ 'line-charts',
+ 'list',
+ 'loan',
+ 'locate-me',
+ 'locked',
+ 'log',
+ 'machine',
+ 'manager',
+ 'manager-insight',
+ 'map',
+ 'map-2',
+ 'map-3',
+ 'marketing-campaign',
+ 'master-task-triangle',
+ 'master-task-triangle-2',
+ 'meal',
+ 'measure',
+ 'measurement-document',
+ 'measuring-point',
+ 'media-forward',
+ 'media-pause',
+ 'media-play',
+ 'media-reverse',
+ 'media-rewind',
+ 'meeting-room',
+ 'menu',
+ 'menu2',
+ 'message-error',
+ 'message-information',
+ 'message-popup',
+ 'message-success',
+ 'message-warning',
+ 'microphone',
+ 'mileage',
+ 'minimize',
+ 'mirrored-task-circle',
+ 'mirrored-task-circle-2',
+ 'money-bills',
+ 'monitor-payments',
+ 'move',
+ 'mri-scan',
+ 'multiple-bar-chart',
+ 'multiple-line-chart',
+ 'multiple-pie-chart',
+ 'multiple-radar-chart',
+ 'multiselect',
+ 'multiselect-all',
+ 'multiselect-none',
+ 'my-sales-order',
+ 'my-view',
+ 'nav-back',
+ 'navigation-down-arrow',
+ 'navigation-left-arrow',
+ 'navigation-right-arrow',
+ 'navigation-up-arrow',
+ 'negative',
+ 'Netweaver-business-client',
+ 'newspaper',
+ 'notes',
+ 'notification-2',
+ 'number-sign',
+ 'numbered-text',
+ 'nurse',
+ 'nutrition-activity',
+ 'official-service',
+ 'offsite-work',
+ 'open-command-field',
+ 'open-folder',
+ 'opportunities',
+ 'opportunity',
+ 'order-status',
+ 'org-chart',
+ 'outbox',
+ 'outdent',
+ 'outgoing-call',
+ 'overflow',
+ 'overlay',
+ 'overview-chart',
+ 'paging',
+ 'paid-leave',
+ 'palette',
+ 'paper-plane',
+ 'passenger-train',
+ 'past',
+ 'paste',
+ 'pause',
+ 'payment-approval',
+ 'pdf-attachment',
+ 'pdf-reader',
+ 'pending',
+ 'per-diem',
+ 'performance',
+ 'permission',
+ 'person-placeholder',
+ 'personnel-view',
+ 'pharmacy',
+ 'phone',
+ 'photo-voltaic',
+ 'physical-activity',
+ 'picture',
+ 'pie-chart',
+ 'pipeline-analysis',
+ 'play',
+ 'pool',
+ 'popup-window',
+ 'positive',
+ 'post',
+ 'ppt-attachment',
+ 'present',
+ 'print',
+ 'private',
+ 'process',
+ 'product',
+ 'program-triangles',
+ 'program-triangles-2',
+ 'project-definition-triangle',
+ 'project-definition-triangle-2',
+ 'projector',
+ 'provision',
+ 'pull-down',
+ 'pushpin-off',
+ 'pushpin-on',
+ 'puzzle',
+ 'quality-issue',
+ 'question-mark',
+ 'radar-chart',
+ 'receipt',
+ 'record',
+ 'redo',
+ 'refresh',
+ 'repost',
+ 'request',
+ 'reset',
+ 'resize',
+ 'resize-corner',
+ 'resize-horizontal',
+ 'resize-vertical',
+ 'response',
+ 'restart',
+ 'retail-store',
+ 'retail-store-manager',
+ 'rhombus-milestone',
+ 'rhombus-milestone-2',
+ 'role',
+ 'sales-document',
+ 'sales-notification',
+ 'sales-order',
+ 'sales-order-item',
+ 'sales-quote',
+ 'sap-box',
+ 'sap-logo-shape',
+ 'sap-ui5',
+ 'save',
+ 'scatter-chart',
+ 'scissors',
+ 'screen-split-one',
+ 'screen-split-three',
+ 'screen-split-two',
+ 'search',
+ 'settings',
+ 'share',
+ 'share-2',
+ 'shelf',
+ 'shield',
+ 'shipping-status',
+ 'shortcut',
+ 'show',
+ 'signature',
+ 'simple-payment',
+ 'simulate',
+ 'slim-arrow-down',
+ 'slim-arrow-left',
+ 'slim-arrow-right',
+ 'slim-arrow-up',
+ 'soccor',
+ 'sonography',
+ 'sort',
+ 'sort-ascending',
+ 'sort-descending',
+ 'sorting-ranking',
+ 'sound',
+ 'sound-loud',
+ 'sound-off',
+ 'source-code',
+ 'status-critical',
+ 'status-inactive',
+ 'status-negative',
+ 'status-positive',
+ 'step',
+ 'stethoscope',
+ 'stop',
+ 'study-leave',
+ 'subway-train',
+ 'suitcase',
+ 'supplier',
+ 'survey',
+ 'switch-classes',
+ 'switch-views',
+ 'synchronize',
+ 'syntax',
+ 'syringe',
+ 'sys-add',
+ 'sys-back',
+ 'sys-back-2',
+ 'sys-cancel',
+ 'sys-cancel-2',
+ 'sys-enter',
+ 'sys-enter-2',
+ 'sys-find',
+ 'sys-find-next',
+ 'sys-first-page',
+ 'sys-help',
+ 'sys-help-2',
+ 'sys-last-page',
+ 'sys-minus',
+ 'sys-monitor',
+ 'sys-next-page',
+ 'sys-prev-page',
+ 'system-exit',
+ 'system-exit-2',
+ 'table-chart',
+ 'table-view',
+ 'tag',
+ 'tag-cloud-chart',
+ 'tags',
+ 'target-group',
+ 'task',
+ 'taxi',
+ 'technical-object',
+ 'temperature',
+ 'text-align-center',
+ 'text-align-justified',
+ 'text-align-left',
+ 'text-align-right',
+ 'text-formatting',
+ 'theater',
+ 'thing-type',
+ 'thumb-down',
+ 'thumb-up',
+ 'time-account',
+ 'time-entry-request',
+ 'time-overtime',
+ 'timesheet',
+ 'to-be-reviewed',
+ 'toaster-down',
+ 'toaster-top',
+ 'toaster-up',
+ 'tools-opportunity',
+ 'travel-expense',
+ 'travel-expense-report',
+ 'travel-itinerary',
+ 'travel-request',
+ 'tree',
+ 'trend-down',
+ 'trend-up',
+ 'trip-report',
+ 'ui-notifications',
+ 'umbrella',
+ 'underline-text',
+ 'undo',
+ 'unfavorite',
+ 'unlocked',
+ 'unpaid-leave',
+ 'unwired',
+ 'up',
+ 'upload',
+ 'upload-to-cloud',
+ 'upstacked-chart',
+ 'user-edit',
+ 'user-settings',
+ 'value-help',
+ 'vds-file',
+ 'vehicle-repair',
+ 'vertical-bar-chart',
+ 'vertical-bar-chart-2',
+ 'vertical-bullet-chart',
+ 'vertical-grip',
+ 'vertical-stacked-chart',
+ 'vertical-waterfall-chart',
+ 'video',
+ 'visits',
+ 'waiver',
+ 'wallet',
+ 'warning',
+ 'warning2',
+ 'washing-machine',
+ 'weather-proofing',
+ 'web-cam',
+ 'widgets',
+ 'windows-doors',
+ 'work-history',
+ 'workflow-tasks',
+ 'world',
+ 'wounds-doc',
+ 'wrench',
+ 'write-new',
+ 'write-new-document',
+ 'x-ray',
+ 'zoom-in',
+ 'zoom-out'
+];