feat: implement highlightedtext component

library/styleguideComponents/ReactComponent/styles.css

@@ -77,3 +77,8 @@
     margin: 40px 20px 0 0;
     min-width: 330px;
 }
+
+.rsg--heading1-6 {
+    font-size: 1.2rem;
+    color: #061C3F;
+}

src/components/HighlightedText/__test__/HighlightedText.spec.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import styled from 'styled-components';
+import HighlightedText from '../';
+
+describe('<HighlightedText />', () => {
+    const parts = [
+        {
+            value: 'Apples',
+            type: 'text',
+        },
+        {
+            value: 'varieties',
+            type: 'hit',
+        },
+        {
+            value: 'Honeycrisp',
+            type: 'text',
+        },
+    ];
+    it('should return 3 <span> with theirs respective values because the default wrapper is a span', () => {
+        const component = mount(<HighlightedText parts={parts} />);
+        const container = component.find('span');
+        expect(
+            container
+                .at(0)
+                .html()
+                .includes('Apples'),
+        ).toBe(true);
+        expect(
+            container
+                .at(1)
+                .html()
+                .includes('varieties'),
+        ).toBe(true);
+        expect(
+            container
+                .at(2)
+                .html()
+                .includes('Honeycrisp'),
+        ).toBe(true);
+    });
+    it('should return 3 custom <span> with theirs respective values because the custom wrapper is a span', () => {
+        const TextContainer = styled.span`
+            color: grey;
+        `;
+
+        const HitContainer = styled.span`
+            color: #fff;
+        `;
+
+        const component = mount(
+            <HighlightedText
+                parts={parts}
+                textComponent={TextContainer}
+                hitComponent={HitContainer}
+            />,
+        );
+        const container = component.find('span');
+        expect(
+            container
+                .at(0)
+                .html()
+                .includes('Apples'),
+        ).toBe(true);
+        expect(
+            container
+                .at(1)
+                .html()
+                .includes('varieties'),
+        ).toBe(true);
+        expect(
+            container
+                .at(2)
+                .html()
+                .includes('Honeycrisp'),
+        ).toBe(true);
+    });
+
+    it('should return a custom <span> with id="hitText" in the container at(1) which corresponds to the text that has a type hit', () => {
+        const TextContainer = styled.span`
+            color: grey;
+        `;
+
+        const HitContainer = styled.span`
+            color: #fff;
+        `;
+
+        // eslint-disable-next-line react/prop-types
+        const hitComponent = ({ children }) => {
+            return <HitContainer id="hitText">{children}</HitContainer>;
+        };
+
+        const component = mount(
+            <HighlightedText
+                parts={parts}
+                textComponent={TextContainer}
+                hitComponent={hitComponent}
+            />,
+        );
+        const container = component.find('span');
+        expect(container.at(1).prop('id')).toBe('hitText');
+    });
+});

src/components/HighlightedText/hitText.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function HitText({
+    parts,
+    hitComponent: HitComponent,
+    textComponent: TextComponent,
+}) {
+    return parts.map((part, index) => {
+        const key = `part-${index}`;
+        if (part.type === 'hit') {
+            return <HitComponent key={key}>{part.value}</HitComponent>;
+        }
+        return <TextComponent key={key}>{part.value}</TextComponent>;
+    });
+}
+
+HitText.propTypes = {
+    parts: PropTypes.arrayOf(
+        PropTypes.exact({
+            value: PropTypes.string,
+            type: PropTypes.string,
+        }),
+    ),
+    hitComponent: PropTypes.elementType,
+    textComponent: PropTypes.elementType,
+};
+
+HitText.defaultProps = {
+    parts: undefined,
+    hitComponent: undefined,
+    textComponent: undefined,
+};

src/components/HighlightedText/index.d.ts

@@ -0,0 +1,15 @@
+import { ComponentType } from 'react';
+import { BaseProps } from '../types';
+
+interface Part {
+    value?: string;
+    type?: string;
+}
+
+export interface HighlightedText extends BaseProps {
+    hitComponent?: ComponentType<{ children?: string }>;
+    textComponent?: ComponentType<{ children?: string }>;
+    part?: Part[];
+}
+
+export default function(props: HighlightedText): JSX.Element | null;

src/components/HighlightedText/index.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import HitText from './hitText';
+import { DefaultHitContainer, DefaultTextContainer } from './styled/index';
+
+/**
+ * HighlightedText is a component that highlights a part of a text.
+ */
+
+function HighlightedText(props) {
+    const { style, className, parts, hitComponent, textComponent } = props;
+    const finalHitContainer = hitComponent || DefaultHitContainer;
+    const finalTextContainer = textComponent || DefaultTextContainer;
+
+    return (
+        <p className={className} style={style}>
+            <HitText
+                parts={parts}
+                hitComponent={finalHitContainer}
+                textComponent={finalTextContainer}
+            />
+        </p>
+    );
+}
+
+export default HighlightedText;
+
+HighlightedText.propTypes = {
+    /** The class of the component. */
+    className: PropTypes.string,
+    /** An object with the custom styles of the container. */
+    style: PropTypes.object,
+    /** An array of objects with the text and the part to be highlighted */
+    parts: PropTypes.arrayOf(
+        PropTypes.exact({
+            value: PropTypes.string,
+            type: PropTypes.string,
+        }),
+    ),
+    /**
+     * The component class or function that is going to be use to render
+     * the highlighted text
+     */
+    hitComponent: PropTypes.elementType,
+    /**
+     * The component class or function that is going to be use to render
+     * the text not highlighted
+     */
+    textComponent: PropTypes.elementType,
+};
+
+HighlightedText.defaultProps = {
+    className: undefined,
+    style: undefined,
+    parts: undefined,
+    hitComponent: undefined,
+    textComponent: undefined,
+};

src/components/HighlightedText/readme.md

@@ -0,0 +1,77 @@
+# HighlightedText base
+##### This example shows the style that is applied by default to the component.
+```js
+import React, { useState } from 'react';
+import {  HighlightedText } from 'react-rainbow-components';
+
+const style = {
+    maxWidth:"700px",
+    textAlign:"center",
+    padding:"20px",
+    margin:"auto",
+};
+
+const parts = [
+        {
+          "value" : "Apples come in several ",
+          "type" : "text"
+        },
+        {
+          "value" : "varieties",
+          "type" : "hit"
+        },
+        {
+          "value" : ", including Fuji, Granny Smith, and Honeycrisp.",
+          "type" : "text"
+        }
+];
+
+<HighlightedText parts={parts} style={style}  />
+
+```
+
+# HighlightedText with custom styles
+##### This example shows the component when custom styles are applied to it.
+
+```js
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import {  HighlightedText } from 'react-rainbow-components';
+
+const style = {
+    maxWidth: '700px',
+    textAlign: 'center',
+    padding: '20px',
+    margin: 'auto',
+};
+
+const parts = [
+        {
+          "value" : "Apples come in several ",
+          "type" : "text"
+        },
+        {
+          "value" : "varieties",
+          "type" : "hit"
+        },
+        {
+          "value" : ", including Fuji, Granny Smith, and Honeycrisp.",
+          "type" : "text"
+        }
+];
+
+const TextContainer = styled.span`
+    color: gray;
+    font-size: 1rem;
+`;
+
+const HitContainer = styled.span`
+    background-color:  #00a3dc;
+    color: #fff;
+    font-size: 1rem;
+`;
+
+<HighlightedText parts={parts} style={style} textComponent={TextContainer} hitComponent={HitContainer}/>
+
+```
+

src/components/HighlightedText/styled/index.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
+
+export const DefaultHitContainer = attachThemeAttrs(styled.span)`
+    color: ${props => props.palette.text.main};
+    font-weight: bold;
+    font-size: 1rem;
+    font-family: 'Lato Black';
+`;
+
+export const DefaultTextContainer = attachThemeAttrs(styled.span)`
+    color: ${props => props.palette.text.main};
+    font-size: 1rem;
+`;

src/components/index.d.ts

@@ -37,6 +37,7 @@ export { default as FileSelector } from './FileSelector';
 export { default as GMap } from './GMap';
 export { default as GoogleAddressLookup } from './GoogleAddressLookup';
 export { default as HelpText } from './HelpText';
+export { default as HighlightedText } from './HighlightedText';
 export { default as ImportRecordsFlow } from './ImportRecordsFlow';
 export { default as Input } from './Input';
 export { default as Lookup } from './Lookup';

src/components/index.js

@@ -35,6 +35,7 @@ export { default as FileSelector } from './FileSelector';
 export { default as GMap } from './GMap';
 export { default as GoogleAddressLookup } from './GoogleAddressLookup';
 export { default as HelpText } from './HelpText';
+export { default as HighlightedText } from './HighlightedText';
 export { default as ImportRecordsFlow } from './ImportRecordsFlow';
 export { default as Input } from './Input';
 export { default as Lookup } from './Lookup';