({
heading: text('Heading (heading):', 'Tutorials', groupId),
- items: items,
+ items,
}),
},
propsSet: {
diff --git a/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.js b/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.js
index 82b5fe2281f..a072a4135df 100644
--- a/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.js
+++ b/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.js
@@ -5,34 +5,53 @@
* LICENSE file in the root directory of this source tree.
*/
-import { text, boolean } from '@storybook/addon-knobs';
-import DataContent from './data/DataContent';
-import Image from '../../Image/Image';
-import imgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--004.jpg';
-import imgLg4x3 from '../../../../../storybook-images/assets/720/fpo--4x3--720x540--004.jpg';
+import { boolean, select, text } from '@storybook/addon-knobs';
+import DataContent, { headings, LOREM } from './data/DataContent';
+import LinkList from '../../LinkList/LinkList';
import React from 'react';
import readme from '../README.stories.mdx';
import styles from './TableOfContents.stories.scss';
import TableOfContents from '../TableOfContents';
-const sources = [
- {
- src: imgLg4x3,
- breakpoint: 400,
- },
- {
- src: imgLg4x3,
- breakpoint: 672,
- },
- {
- src: imgLg1x1,
- breakpoint: 1056,
- },
-];
-
-const defaultSrc = imgLg1x1;
-const alt = 'Lorem Ipsum';
-const longDescription = 'Lorem Ipsum Dolor';
+export const Default = ({ parameters }) => {
+ const { numberOfItems: menuItems, withHeadingContent } =
+ parameters?.props?.Other ?? {};
+ const headingItems = [
+ {
+ type: 'local',
+ copy: 'DevOps',
+ cta: {
+ href: 'https://github.com/carbon-design-system/carbon-web-components',
+ },
+ },
+ {
+ type: 'local',
+ copy: 'Automation',
+ cta: {
+ href: 'https://github.com/carbon-design-system/carbon-web-components',
+ },
+ },
+ {
+ type: 'local',
+ copy: 'Development',
+ cta: {
+ href: 'https://github.com/carbon-design-system/carbon-web-components',
+ },
+ },
+ ];
+ const headingContent = (
+
+ );
+ return (
+ <>
+
+
+
+
+ );
+};
export default {
title: 'Components|Table of contents',
@@ -46,83 +65,50 @@ export default {
],
parameters: {
...readme.parameters,
- },
-};
-
-export const ManuallyDefineMenuItems = ({ parameters }) => {
- const { menuItems, menuLabel, menuRule, headingContent } =
- parameters?.props?.TableOfContents ?? {};
- const params = new URLSearchParams(window.location.search);
- const themeParam = params.has('theme') ? params.get('theme') : null;
- const theme =
- themeParam ||
- document.documentElement.getAttribute('storybook-carbon-theme') ||
- 'white';
- return (
-
-
-
- );
-};
-
-ManuallyDefineMenuItems.story = {
- name: 'Manually define menu items',
- parameters: {
knobs: {
- TableOfContents: ({ groupId }) => ({
- menuLabel: text('Menu label (menuLabel)', 'Jump to', groupId),
- menuRule: boolean('Optional Rule (menuRule)', false, groupId),
+ Other: ({ groupId }) => ({
+ withHeadingContent: boolean('With heading content', false, groupId),
+ numberOfItems: Array.from({
+ length: select('Number of items', [5, 6, 7, 8], 5, groupId),
+ }).map((_, i) => ({
+ heading: text(
+ `Section ${i + 1} heading`,
+ headings[i % headings.length],
+ groupId
+ ),
+ copy: text(
+ `Section ${i + 1} copy`,
+ `${LOREM}\n`.repeat(3).trim(),
+ groupId
+ ),
+ })),
}),
},
},
};
-export const DynamicItems = ({ parameters }) => (
-
+export const Horizontal = () => (
+
+ This component is maintained in{' '}
+ @carbon/ibmdotcom-web-components library with a{' '}
+
+ React wrapper
+
+ .
+
);
-DynamicItems.story = {
- name: 'Dynamic items',
+Horizontal.story = {
+ name: 'Horizontal',
parameters: {
- knobs: {
- TableOfContents: ({ groupId }) => ({
- menuLabel: text('Menu label (menuLabel)', 'Jump to', groupId),
- }),
- },
- },
-};
-
-export const WithHeadingContent = ({ parameters }) => (
-
-);
-
-WithHeadingContent.story = {
- name: 'With heading content',
- parameters: {
- knobs: {
- TableOfContents: ({ groupId }) => ({
- menuLabel: text('Menu label (menuLabel)', 'Jump to', groupId),
- menuRule: boolean('Optional Rule (menuRule)', false, groupId),
- headingContent: (
-
- ),
- }),
+ ...readme.parameters,
+ knobs: null,
+ percy: {
+ skip: true,
},
+ proxy: true,
},
};
diff --git a/packages/react/src/components/TableOfContents/__stories__/data/DataContent.js b/packages/react/src/components/TableOfContents/__stories__/data/DataContent.js
index 2b744e41b32..afd933b0222 100644
--- a/packages/react/src/components/TableOfContents/__stories__/data/DataContent.js
+++ b/packages/react/src/components/TableOfContents/__stories__/data/DataContent.js
@@ -1,210 +1,50 @@
/**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/* eslint-disable jsx-a11y/anchor-is-valid */
+import { PropTypes } from 'prop-types';
import React from 'react';
-const DataContent = () => (
+
+export const headings = [
+ 'Forward thinkers',
+ 'Innovation and transformation',
+ 'Client success stories',
+ 'Iconic moments in IBM history',
+ 'Trust and responsibility',
+ 'Connect with IBM',
+];
+
+// eslint-disable-next-line max-len
+export const LOREM = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
+nisl.`;
+
+const generateCopySections = n => [...Array(n)].map(() => {LOREM}
);
+
+const DataContent = ({ items }) => (
-
- Cras molestie condimentum
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
- condimentum consectetur. Nulla tristique lacinia elit, at elementum dui
- gravida non. Mauris et nisl semper, elementum quam non, lacinia purus.
- Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque
- facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis
- scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et
- ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam
- vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien
- pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
- condimentum consectetur. Nulla tristique lacinia elit, at elementum dui
- gravida non. Mauris et nisl semper, elementum quam non, lacinia purus.
- Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque
- facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis
- scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et
- ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam
- vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien
- pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
- condimentum consectetur. Nulla tristique lacinia elit, at elementum dui
- gravida non. Mauris et nisl semper, elementum quam non, lacinia purus.
- Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque
- facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis
- scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et
- ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam
- vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien
- pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-
-
- Praesent fermentum sodales
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
- condimentum consectetur. Nulla tristique lacinia elit, at elementum dui
- gravida non. Mauris et nisl semper, elementum quam non, lacinia purus.
- Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque
- facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis
- scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et
- ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam
- vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien
- pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
- condimentum consectetur. Nulla tristique lacinia elit, at elementum dui
- gravida non. Mauris et nisl semper, elementum quam non, lacinia purus.
- Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque
- facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis
- scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et
- ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam
- vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien
- pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
- condimentum consectetur. Nulla tristique lacinia elit, at elementum dui
- gravida non. Mauris et nisl semper, elementum quam non, lacinia purus.
- Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque
- facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis
- scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et
- ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam
- vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien
- pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-
-
- Nulla tristique lacinia
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
- condimentum consectetur. Nulla tristique lacinia elit, at elementum dui
- gravida non. Mauris et nisl semper, elementum quam non, lacinia purus.
- Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque
- facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis
- scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et
- ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam
- vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien
- pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
- condimentum consectetur. Nulla tristique lacinia elit, at elementum dui
- gravida non. Mauris et nisl semper, elementum quam non, lacinia purus.
- Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque
- facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis
- scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et
- ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam
- vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien
- pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
- condimentum consectetur. Nulla tristique lacinia elit, at elementum dui
- gravida non. Mauris et nisl semper, elementum quam non, lacinia purus.
- Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque
- facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis
- scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et
- ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam
- vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien
- pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-
-
- Morbi id nibh metus
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
- condimentum consectetur. Nulla tristique lacinia elit, at elementum dui
- gravida non. Mauris et nisl semper, elementum quam non, lacinia purus.
- Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque
- facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis
- scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et
- ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam
- vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien
- pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
- condimentum consectetur. Nulla tristique lacinia elit, at elementum dui
- gravida non. Mauris et nisl semper, elementum quam non, lacinia purus.
- Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque
- facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis
- scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et
- ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam
- vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien
- pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
- condimentum consectetur. Nulla tristique lacinia elit, at elementum dui
- gravida non. Mauris et nisl semper, elementum quam non, lacinia purus.
- Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque
- facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis
- scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et
- ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam
- vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien
- pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-
-
- Integer non scelerisque
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
- condimentum consectetur. Nulla tristique lacinia elit, at elementum dui
- gravida non. Mauris et nisl semper, elementum quam non, lacinia purus.
- Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque
- facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis
- scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et
- ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam
- vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien
- pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
- condimentum consectetur. Nulla tristique lacinia elit, at elementum dui
- gravida non. Mauris et nisl semper, elementum quam non, lacinia purus.
- Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque
- facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis
- scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et
- ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam
- vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien
- pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
- condimentum consectetur. Nulla tristique lacinia elit, at elementum dui
- gravida non. Mauris et nisl semper, elementum quam non, lacinia purus.
- Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque
- facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis
- scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et
- ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam
- vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien
- pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-
+ {items?.map(({ heading, copy }, i) => (
+ <>
+ {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+
+ {heading}
+
+ {copy
+ ? copy.split('\n').map(section =>
{section}
)
+ : generateCopySections(3)}
+
+ ))}
${LOREM}
+ `
+ );
+
+const content = ({ contentClass, items }) => html`
-
-
- Forward thinkers
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
-
- Innovation and transformation
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
-
- Client success stories
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
-
- Iconic moments in IBM history
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
-
- Trust and responsibility
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
-
- Connect with IBM
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
+ ${items.map(
+ ({ heading, copy }, i) =>
+ html`
+
+
+ ${heading}
+
+
+ ${copy
+ ? copy.split('\n').map(
+ section =>
+ html`
+
${section}
+ `
+ )
+ : generateCopySections(3)}
+ `
+ )}
+
+ ${content({ contentClass: 'bx--tableofcontents-horizontal__contents', items })}
+
+
-
- ${content('bx--tableofcontents-horizontal__contents')}
-
-
{LOREM}
);
+
+const content = ({ items }: { items: Array }) => (
-
- Forward thinkers
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Innovation and transformation
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Client success stories
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Iconic moments in IBM history
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Trust and responsibility
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Connect with IBM
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia
- elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien
- volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis.
- Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in
- faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non
- vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
- nisl.
-
+ {items?.map(({ heading, copy }, i: Number) => (
+ <>
+ {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+
+ {heading}
+
+ {copy ? copy.split('\n').map((section: String) =>
{section}
) : generateCopySections(3)}
+
+ ))}
-