templates.js

import { Notification } from 'grommet';
import {
  ContentLayoutPreview,
  CodeBlocksPreview,
  EmptyStatePreview,
  FeedbackPreview,
  StatusIndicatorPreview,
  ToastPreview,
  SelectorPreview,
  PopoverPreview,
} from '../../../examples/cardPreviews';

export const templates = [
  {
    name: 'Ascending navigation',
    available: true,
    cardOrder: 101,
    description: `Ascending navigation enables users 
    to move up one level in an application’s hierarchy, 
    from a child page back to its parent.`,
    preview: {
      image: {
        src: {
          light: '/templateImages/ascending-navigation.svg',
          dark: '/templateImages/ascending-navigation-invert.svg',
        },
        alt: 'Ascending navigation diagram',
        fit: 'contain',
      },
    },
    seoDescription: `Allows the user to navigate to a parent 
     page from a child page by moving upward in the application
     or website hierarchy.`,
    sections: ['Guidance', 'When to use', 'Ascending Navigation Example'],
    relatedContent: [
      'Navigation',
      'Side to side navigation',
      'Matrix navigation',
      'Drill down navigation',
    ],
    tags: [],
  },
  {
    name: 'Content layouts',
    available: true,
    cardOrder: 3,
    description: `Creating responsive, adaptable content layouts is central to 
    the user experience.`,
    seoDescription: `Creating responsive, adaptable content layouts is central 
    to the user experience.`,
    preview: {
      component: () => <ContentLayoutPreview />,
    },
    sections: [
      'Designing for Responsiveness',
      'Prioritizing Content Needs',
      'Breakpoints',
      'Page Margin',
      'Templates',
      'Single Column Layouts',
      '2 Column Layouts',
      '3 Column Layouts',
      'Multi-column Layout',
    ],
    tags: [
      'content',
      'layout',
      'page layouts',
      'responsiveness',
      'responsive',
      'content layout',
      'content structure',
      'content design',
      'layout arrangement',
      'information structure',
      'content organization',
      'layout framework',
      'information display',
      'structure design',
      'content presentation',
      'display layout',
      'information composition',
    ],
    relatedContent: ['Page layouts', 'Grid'],
  },
  {
    name: 'Dashboards',
    available: true,
    cardOrder: 100,
    description: `At-a-glance preview for operation critical information 
    with easy access to areas requiring attention.`,
    preview: {
      image: {
        src: {
          light: '/templateImages/template-preview-dashboard.svg',
          dark: '/templateImages/template-preview-dashboard-invert.svg',
        },
        alt: 'HPE Dashboards Preview',
      },
    },
    seoDescription: `HPE Design System dashboard template for screens 
    featuring content within cards.`,
    sections: [],
    relatedContent: [
      'Grid',
      'Page layouts',
      'Content layouts',
      'Card',
      'Lists',
    ],
    tags: [
      'dashboard',
      'control panel',
      'overview',
      'home screen',
      'analytics board',
      'data hub',
      'command center',
      'performance dashboard',
      'information dashboard',
      'status panel',
      'monitoring center',
      'metrics board',
    ],
  },
  {
    name: 'Drill down navigation',
    available: true,
    cardOrder: 100,
    description: `Allows users to progressively descend 'down'
     branches of a hierarchical tree into a child 
    screen to drill down into more granular details.
    `,
    preview: {
      image: {
        src: {
          light: '/templateImages/DrillDown.svg',
          dark: '/templateImages/DrillDown-invert.svg',
        },
        alt: 'HPE Dashboards Preview',
        fit: 'contain',
      },
    },
    seoDescription: `Allows users to progressively descend 'down'
    branches of a hierarchical tree into a child 
   screen to drill down into more granular details.
   `,
    sections: ['When to Use', 'Guidelines', 'Drill Down Navigation Examples'],
    relatedContent: [
      'Navigation',
      'Side to side navigation',
      'Matrix navigation',
    ],
    tags: [
      'drill down navigation',
      'hierarchical navigation',
      'nested navigation',
      'submenu navigation',
      'multi-level navigation',
      'expandable navigation',
      'tiered navigation',
      'cascading navigation',
      'tree navigation',
      'hierarchical menu',
      'nested menu',
      'submenu system',
      'layered navigation',
    ],
  },
  {
    name: 'Filtering',
    available: true,
    cardOrder: 4,
    description: `Allows users to create a focused data set by specifying 
    data attributes and values of interest.`,
    preview: {
      image: {
        alt: 'HPE Filtering Preview',
        fit: 'contain',
        src: {
          light: '/templateImages/template-preview-filtering.svg',
          dark: '/templateImages/template-preview-filtering-invert.svg',
        },
      },
    },
    seoDescription: `Allows users to create a focused data set by specifying 
    data attributes and values of interest.`,
    sections: [
      'What makes up filtering',
      'Filters',
      'Filters in a center Layer',
      'Filtering with selectable results',
      'More examples of filtering',
      'Filtering with RangeSelector',
      'Filtering with Select',
    ],
    relatedContent: ['DataTable', 'Lists', 'Card'],
    tags: [
      'filter controls',
      'table filter',
      'list filter',
      'card filter',
      'search table',
      'filters layer',
      'filter guidelines',
      'filtered results',
      'pagination',
      'results',
      'filters',
      'fliter',
      'filtering',
      'sort',
      'sorting',
      'refinement',
      'selection',
      'search criteria',
      'data filter',
      'filter options',
      'filtering tool',
      'refine tool',
      'search options',
      'data refinement',
      'sorting criteria',
    ],
  },
  {
    name: 'Selector',
    available: true,
    cardOrder: 4,
    description: `A selection control that allows users to choose one or
    more related options to access information, filter, and make selections.`,
    preview: {
      component: () => <SelectorPreview />,
    },
    seoDescription: `A selection control that allows users to choose one or
    more related options to access information, filter, and make selections`,
    relatedContent: [
      'RadioButtonGroup',
      'CheckBoxGroup',
      'Select',
      'SelectMultiple',
    ],
    sections: [],
    tags: [],
  },
  {
    name: 'Popover',
    available: true,
    cardOrder: 5,
    description: `A Popover is an overlay presenting contextual information
     related to a specific UI element.`,
    preview: {
      component: () => <PopoverPreview />,
    },
    seoDescription: `A Popover is an overlay presenting contextual information
     related to a specific UI element. It is revealed and closed by click
     events.`,
    relatedContent: ['Tip'],
    sections: ['Use cases', 'Anatomy', 'Content guidelines', 'Accessibility'],
    tags: [
      'popup',
      'pop up',
      'popover',
      'tip',
      'tooltip',
      'modal',
      'popover menu',
      'inline popover',
    ],
  },
  {
    name: 'User feedback collection',
    available: true,
    description: `Improve customer experiences and make impactful,
    data-driven decisions by collecting feedback directly from users.`,
    preview: {
      component: () => <FeedbackPreview />,
    },
    seoDescription: `Improve customer experiences and make impactful,
    data-driven decisions by collecting feedback directly from users.
    `,
    sections: [],
    relatedContent: ['Forms'],
    tags: [
      'feedback',
      'survey',
      'customer experience',
      'user experience',
      'analytics',
      'qualtrics',
      'feedback',
      'response',
      'comment',
      'reaction',
      'user comment',
      'review',
      'user feedback',
      'input',
      'user response',
      'evaluation',
      'user review',
      'comment box',
      'input field',
      'user comment',
      'reaction box',
      'user feedback collection',
      'feedback compilation',
      'response collection',
      'aggregation',
      'user insights',
      'comments',
      'response',
      'vote',
      'voting',
      'sentiment indicator',
      'rate',
      'rating',
      'star',
      'thumb toggle',
      'opinion',
      'review',
    ],
  },
  {
    name: 'Forms',
    available: true,
    cardOrder: 1,
    description: `Common form use cases from application configuration 
    to payment acceptance.`,
    preview: {
      image: {
        src: {
          light: '/templateImages/template-preview-form.svg',
          dark: '/templateImages/template-preview-form-invert.svg',
        },
        alt: 'HPE Forms Preview',
        fit: 'contain',
      },
    },
    seoDescription: 'HPE Design System form examples and templates.',
    sections: [
      'When to use',
      'When not to use',
      'Accessibility',
      'Terms and Conditions',
      'Single field forms',
      'Use cases',
      'Sign up',
      'Sign in',
      'Filter',
      'Sort',
      'Change Password',
      'Settings',
      'Pay',
      'Shipping',
      'Customize',
      'Required vs. optional fields',
      'Single required FormField',
      'Fields with character limits',
      'Exceptions and how to address them',
      'Where to present a form',
      'Full-page forms',
      'Avoid using multiple column layouts',
      'Managing child objects',
    ],
    relatedContent: [
      'TextInput',
      'Button',
      'MaskedInput',
      'CheckBox',
      'CheckBoxGroup',
      'RadioButtonGroup',
    ],
    tags: [
      'forms',
      'validation',
      'messaging',
      'form examples',
      'form',
      'forms',
      'input form',
      'data form',
      'submission form',
      'entry form',
      'input sheet',
      'information form',
      'data entry',
      'response form',
      'query form',
      'interaction form',
      'data capture',
    ],
  },
  {
    name: 'Managing child objects',
    parentPage: 'Forms',
    available: true,
    description: `How to show, hide, and edit details of child 
    objects related to a parent within a form context.`,
    preview: {
      image: {
        src: {
          light: '/templateImages/template-preview-child objects.svg',
          dark: '/templateImages/template-preview-child objects-invert.svg',
        },
        alt: 'HPE Forms Preview',
        fit: 'contain',
      },
    },
    seoDescription: `HPE Design System guidance for how to show, hide, and
    edit details of child objects related to a parent within a form context.`,
    sections: [],
    relatedContent: ['Forms'],
    tags: [],
  },
  {
    name: 'Global header',
    available: true,
    cardOrder: 8,
    description: `A standardized header for use when building applications and 
    services that live in the HPE ecosystem.`,
    preview: {
      image: {
        src: {
          light: '/templateImages/template-preview-global-header.svg',
          dark: '/templateImages/template-preview-global-header-invert.svg',
        },
        alt: 'HPE Design System Global Header',
        fit: 'contain',
      },
    },
    seoDescription: `A standardized header for use when building applications 
    and services that live in the HPE ecosystem.`,
    sections: [
      'What makes up the Global Header',
      'App Identity',
      'Header Main Navigation',
      'Shopping Cart',
      'Country Selector',
      'Cube Menu',
      'Color Scheme',
      'What makes up the Global footer',
      'Privacy Link',
      'Terms of Use Link',
      'Ad Choices and Cookies Link',
      'Do Not Sell My Personal Information Link',
    ],
    relatedContent: ['Page layouts', 'Header', 'Navigation'],
    tags: [
      'common header',
      'CHFWS',
      'HPE Common Header and Footer Web Service',
      'HFWS test page',
      'global header',
      'global footer',
      'header service',
      'site header',
      'website header',
      'top bar',
      'page header',
      'main header',
      'header navigation',
      'top navigation',
      'header bar',
      'top banner',
      'header section',
      'site banner',
    ],
  },
  {
    name: 'Internationalization',
    available: true,
    description: `How to internationalize a site or application that uses the 
    HPE Design System.`,
    preview: {
      image: {
        src: {
          light: '/templateImages/template-preview-i18n.svg',
          dark: '/templateImages/template-preview-i18n-invert.svg',
        },
        alt: 'Internationalization',
        fit: 'contain',
      },
    },
    seoDescription: `How to internationalize a site or application that uses
    the HPE Design System`,
    sections: ['Localizing Grommet'],
    relatedContent: [],
    tags: [
      'localization',
      'internationalization',
      'localisation',
      'internationalisation',
      'localize',
      'localise',
      'I18N',
      'react-intl',
      'react-i18next',
      'messages',
      'global users',
      'localization',
      'multilingual support',
      'language adaptation',
      'regionalization',
      'language customization',
    ],
  },
  {
    name: 'Lists',
    available: true,
    cardOrder: 100,
    description:
      'Go-to patterns for displaying many services, devices, users, and more.',
    preview: {
      image: {
        src: {
          light: '/templateImages/template-preview-list.svg',
          dark: '/templateImages/template-preview-list-invert.svg',
        },
        alt: 'HPE Lists Preview',
        fit: 'contain',
      },
    },
    relatedContent: ['Dashboards', 'Card', 'Page layouts', 'Pagination'],
    seoDescription:
      'HPE Design System template for providing a list of information.',
    sections: [
      'About Lists',
      'Types of Lists',
      'Selection',
      'Action Menu in List Item',
      'Long Lists',
      'Wrapping vs Truncation:',
      'List vs Table',
      'Icon + Name + Option',
      'Name + Description + Option',
      'Name + Option + Action',
      'Image + Name + Description',
      'Paginated',
      'Item order',
    ],
    tags: [
      'ul',
      'ol',
      'li',
      'styled lists',
      'infinitescroll',
      'infinite scroll',
      'paginated lists',
      'list',
      'lists',
      'item list',
      'data list',
      'collection',
      'scrollable list',
      'item collection',
      'listing',
      'scroll list',
      'entry list',
      'item group',
      'content list',
      'scrollable content',
      'list',
      'ol',
      'ul',
      'li',
      'dl',
      'dd',
      'dt',
    ],
  },
  {
    name: 'Matrix navigation',
    description: `Matrix navigation is not a path 
    that you can define for the user,
    rather the user defines it themselves.`,
    available: true,
    cardOrder: 100,
    preview: {
      pad: { horizontal: 'small' },
      image: {
        src: {
          light: '/templateImages/MatrixNavigation.svg',
          dark: '/templateImages/MatrixNavigation-invert.svg',
        },
        alt: 'HPE Lists Preview',
        fit: 'contain',
      },
    },
    relatedContent: [],
    seoDescription: `Martix Navigation is not a path that
    you can define for the user,
    rather the user defines it themselves.`,
    sections: [
      'When a User would Use',
      'Matrix within a Music App Example',
      'Matrix within App Example',
    ],
    tags: [
      'matrix view',
      'table menu',
      'grid selector',
      'grid menu',
      'grid navigator',
      'array navigation',
      'multi navigation',
      'matrix selector',
    ],
  },
  {
    name: 'Navigation',
    available: true,
    cardOrder: 7,
    description: 'The entry point for the expansive topic of Navigation.',
    preview: {
      image: {
        src: {
          light: '/templateImages/template-preview-navigation.svg',
          dark: '/templateImages/template-preview-navigation-invert.svg',
        },
        alt: 'HPE Navigation Preview',
        fit: 'contain',
      },
    },
    seoDescription: `Navigation pattern guidance and recommendations for a 
      variety of UI use cases.`,
    sections: ['Navigation Within an Application'],
    relatedContent: [],
    tags: [
      'navigation patterns',
      'navigation',
      'menu',
      'navigation menu',
      'nav bar',
      'nav panel',
      'links',
      'menu bar',
      'site navigation',
      'site menu',
    ],
  },
  {
    name: 'Page layouts',
    available: true,
    cardOrder: 2,
    description: `Choosing a layout is an important first step in designing 
    a user interface. These guidelines will help create a consistent user 
    experience across HPE applications and services.`,
    preview: {
      image: {
        src: {
          light: '/templateImages/template-preview-pagelayout.svg',
          dark: '/templateImages/template-preview-pagelayout-invert.svg',
        },
        alt: 'HPE Page Layouts Preview',
        fit: 'contain',
      },
    },
    relatedContent: [
      'Content layouts',
      'Navigation',
      'Dashboards',
      'Global header',
      'Header',
      'Footer',
    ],
    seoDescription:
      'HPE Design System page layout options, anatomies, and behaviors.',
    sections: [
      'Elements of an App UI',
      'Page Container',
      'Page Container Widths',
      'Wide (default)',
      'Narrow',
      'Full',
    ],
    tags: [
      'common layouts',
      'responsive',
      'responsive layouts',
      'shells',
      'application layouts',
      'app layouts',
      'page layouts',
      'page layout',
      'layout structure',
      'page structure',
      'page design',
      'screen layout',
      'content arrangement',
      'page organization',
      'layout framework',
      'screen structure',
      'page presentation',
      'display layout',
      'page composition',
    ],
  },
  {
    name: 'Side to side navigation',
    available: true,
    cardOrder: 100,
    description: `Allows users to access sibling screens sequentially from
     the same level of the hierarchy.`,
    preview: {
      pad: { horizontal: 'small' },
      image: {
        src: {
          light: '/templateImages/Side-to-Side.svg',
          dark: '/templateImages/SideToSide-invert.svg',
        },
        alt: 'Side-to-Side Navigation Preview',
        fit: 'contain',
      },
    },
    seoDescription: `Allows users to access sibling screens sequentially from
    the same level of the hierarchy.`,
    relatedContent: [
      'Navigation',
      'Drill down navigation',
      'Matrix navigation',
      'Tabs',
    ],
    sections: [
      'When to use',
      'HPE Local Header Example',
      'HPE Global Header Example',
      'Header Guidelines',
      'Persistent Sidebar',
      'Tabs Example',
      'Tabs Guidelines',
    ],
    tags: [
      'navigation',
      'lateral',
      'peer',
      'peer to peer',
      'sibling',
      'side to side navigation',
      'horizontal navigation',
      'lateral navigation',
      'sideways navigation',
    ],
  },
  {
    name: 'Status indicator',
    available: true,
    description: `Quickly provide peace-of-mind or call attention to items 
      requiring a user's action.`,
    preview: {
      component: () => <StatusIndicatorPreview />,
    },
    seoDescription: `Highlight notification messages and alerts which 
      require a user's attention. Status indicators provide peace-of-mind 
      when all is well or call attention to items when a user needs to take 
      action`,
    relatedContent: ['Notification', 'Toast notifications'],
    sections: ['What makes up a status indicator', 'Icons and Shapes'],
    tags: [
      'displaying status',
      'display status',
      'status colors',
      'status icons',
      'status WCAG',
    ],
  },
  {
    name: 'DataTable customization',
    available: true,
    cardOrder: 100,
    description: `Allows users to customize which columns are visible in a data 
    table and in what order they appear.`,
    preview: {
      image: {
        src: {
          light: '/templateImages/template-preview-table-customize.svg',
          dark: '/templateImages/template-preview-table-customize-invert.svg',
        },
        alt: 'HPE Table Customization Preview',
        fit: 'contain',
      },
    },
    seoDescription: `Allows users to customize table column order and
    visibility to best suit their needs.`,
    sections: [
      'What makes up the customizable table',
      'An action to display column visibility and order controls.',
      'Column visibility',
      'Column order',
    ],
    relatedContent: ['DataTable', 'Lists', 'Filtering'],
    tags: [
      'ordering columns',
      'order columns',
      'reorder',
      're-order',
      'column order',
      'table configuration panel',
      'tabulr data',
      'data table',
      'table sorting',
      'table filtering',
      'table display',
      'data grid',
      'table data configuration',
      'presets',
      'views',
    ],
  },
  {
    name: 'Inline notifications',
    available: true,
    description: `Inline notifications help application users by delivering 
    timely, contextual information and feedback related to their actions.`,
    preview: {
      component: () => (
        <Notification
          message="Nearing your allotted budget."
          status="warning"
        />
      ),
      background: 'background-back',
    },
    seoDescription: `Inline notifications help application users by delivering 
    timely, contextual information and feedback related to their actions.`,
    sections: [],
    relatedContent: [
      'Notification',
      'Toast notifications',
      'Status indicator',
      'Global notifications',
    ],
    tags: [
      'inline',
      'inline notification',
      'inline notifications',
      'inline notifications',
      'in-content notifications',
      'alerts',
      'messages',
      'on-screen alerts',
      'feedback',
    ],
  },
  {
    name: 'Toast notifications',
    available: true,
    description: `Toast notifications are used to communicate low severity 
      level information to users in an unobtrusive way.`,
    preview: {
      component: () => (
        <ToastPreview card title="Hooray" message="Your toast is done!" />
      ),
      background: 'background-back',
    },
    seoDescription: `Toast notifications are used to communicate low 
    severity level information to users in an unobtrusive way.`,
    sections: [
      'Guidance',
      'When should you use a Toast Notification',
      'Handling multiple Toast Notifications',
      'Persistence',
      'Anatomy',
      'Status Indicator',
      'Content (Title + Message)',
      'Close Button',
      'Accessibility',
      'Placement',
      'Top-right Aligned Toast',
    ],
    relatedContent: [
      'Notification',
      'Status indicator',
      'Inline notifications',
      'Global notifications',
    ],
    tags: [
      'feedback',
      'messages',
      'messaging',
      'toast',
      'pop up',
      'popup',
      'status',
      'confirmation',
      'toast notification',
      'pop-up',
      'snack notification',
      'alert notification',
      'temporary notification',
      'popup alert',
      'notification bar',
      'transient message',
      'brief message',
      'pop notification',
      'flyout message',
    ],
  },
  {
    name: 'Wizard',
    available: true,
    cardOrder: 6,
    description: 'Wizards are an effective way to handle multi-step forms.',
    preview: {
      image: {
        src: {
          light: '/templateImages/template-preview-wizard.svg',
          dark: '/templateImages/template-preview-wizard-invert.svg',
        },
        alt: 'HPE Wizard Preview',
        fit: 'contain',
      },
    },
    seoDescription: 'Wizards are an effective way to handle multi-step forms.',
    sections: [
      'Header and Footer behavior',
      'Providing guidance for a form step',
      'Indicating progress',
      'Validation',
      'Summarizing what was accomplished or configured',
      'Cancellation',
      'Single Column vs Two Column Wizards',
      'Two-column Wizard',
      'Alignment',
      'Previous step button',
      'Cancel button',
      'Title',
      'Next step button',
    ],
    relatedContent: ['Forms'],
    tags: [
      'multi-step form',
      'mutliple steps',
      'multistep form',
      'stepped form',
      'task wizard',
      'progress indicators',
      'step sequencing',
      'form input',
      'sequiential workflow',
      'task flow',
      'form wizard',
      'stepped workflow',
      'progressive dialog',
      'progressive dialog',
      'progressive form',
    ],
  },
  {
    name: 'Code blocks',
    available: true,
    cardOrder: 100,
    description: 'A standardized style for displaying code.',
    preview: {
      component: () => <CodeBlocksPreview />,
      background: 'background-back',
    },
    seoDescription: 'A standardized style for displaying code.',
    sections: ['Guidance', 'Theming', 'Scrolling', 'Line Wrapping'],
    tags: [
      'code',
      'syntax highlighting',
      'code block',
      'code blocks',
      'code snippet',
      'code sample',
      'code display',
      'source code box',
      'code segment',
      'code section',
      'code example',
      'code view',
      'code window',
      'code listing',
      'code fragment',
    ],
  },
  {
    name: 'Scrolling and pagination',
    available: false,
    cardOrder: 100,
    description: `When and how to apply techniques such as scrollable regions 
    and pagination.`,
    seoDescription: `When and how to apply techniques such as scrollable 
    regions or pagination.`,
    sections: [],
    relatedContent: ['Pagination', 'Lists', 'Card', 'DataTable'],
    tags: ['scrolling', 'scroll regions', 'pagination', 'scroll vs. paginate'],
    preview: {
      image: {
        src: {
          light: '/templateImages/template-preview-scrolling-pagination.svg',
          // eslint-disable-next-line max-len
          dark: '/templateImages/template-preview-scrolling-pagination-invert.svg',
        },
        alt: 'Global notifications under HPE Global Application header.',
        fit: 'contain',
      },
    },
  },
  {
    name: 'Global notifications',
    available: true,
    cardOrder: 10,
    description: `Global notifications are system generated alerts that
    attract user's attention to system conditions and updates.`,
    preview: {
      image: {
        src: {
          light: '/templateImages/template-preview-banner-notification.svg',
          // eslint-disable-next-line max-len
          dark: '/templateImages/template-preview-banner-notification-invert.svg',
        },
        alt: 'Global notifications under HPE Global Application header.',
        fit: 'contain',
      },
    },
    seoDescription: `Global notifications are system generated alerts
     that attract user's attention to system conditions and updates.`,
    sections: [
      'Guidance',
      'Usage',
      'Do Not Use Global Banners For',
      'Things to Avoid',
      'Anatomy',
      'Best Pratices',
      'Placement',
      'Format',
      'Behavior',
      'Variants',
      'Dismissible Info Banner',
      'Dismissible Critical Banner',
      'Persistent Critical Banner',
      'Dismissible Warning Banner',
      'Persistent Warning Banner',
      "Do's and Don'ts",
    ],
    relatedContent: [
      'Notification',
      'Inline notifications',
      'Toast notifications',
      'Status indicator',
    ],
    tags: [
      'notifications',
      'global',
      'system alerts',
      'alert',
      'maintenance',
      'subscription',
      'expiration',
      'feature release',
      'updates',
      'global banner notification',
      'site-wide banner alert',
      'website banner message',
      'top banner notification',
      'page-wide alert banner',
      'main banner notification',
      'header banner alert',
      'top-of-page alert',
      'site-wide alert banner',
      'header notification banner',
      'website-wide alert banner',
      'top-of-page banner message',
    ],
  },
  {
    name: 'Empty state',
    available: true,
    cardOrder: 10,
    description: `An empty state refers to when the UI is 
    devoid of any data or information.`,
    preview: {
      component: () => <EmptyStatePreview />,
      background: 'background-back',
    },
    seoDescription: `An empty state refers to when the UI is devoid of any 
    data or information.`,
    sections: [],
    relatedContent: ['Notification', 'Toast notifications', 'Status indicator'],
    tags: [
      'day zero',
      'empty',
      'no data',
      'error management',
      'error',
      'blank state',
      'zero state',
      'placeholder',
      'no content state',
      'null state',
      'void state',
      'empty page',
      'initial state',
      'no information state',
      'blank screen',
    ],
  },
];