SpecialText

src/Containers/SpecialText/SpecialText.stories.tsx

@@ -0,0 +1,28 @@
+import { action } from '@storybook/addon-actions';
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { SpecialText, SpecialTextProps } from '../index';
+import { SmallText } from 'index';
+import styled from 'styled-components';
+
+const StyledSmallText = styled(SmallText)`
+    &: hover {
+        font-weight: bold;
+    }
+`;
+
+export default {
+    title: 'Components/SpecialText',
+    component: SpecialText,
+    args: {
+        text: 'Special Text',
+        children: [
+            <StyledSmallText onClick={action('Index 0')} children={'pie'}/>,
+            <StyledSmallText onClick={action('Index 1')} children={'world'}/>
+        ],
+    },
+} as Meta;
+
+export const Basic: Story<SpecialTextProps> = (args) => (
+    <SmallText>Here we introduce <SpecialText {...args}/></SmallText>
+);

src/Containers/SpecialText/SpecialText.tsx

@@ -0,0 +1,64 @@
+import Dropdown, { IDropdownProps } from '../Dropdown/Dropdown';
+import DropdownItem from '../Dropdown/DropdownItem';
+import React, { Children, isValidElement, useCallback, useState } from 'react';
+import { SmallText } from 'index';
+import styled from 'styled-components';
+
+/**
+ * Properties for SpecialText
+ * @param {string} text - Highlighted text
+ * @param {React.ReactNode[]} children - List of elements in DropDown
+ * @param {IDropdownProps} dropDownProps
+ */
+export interface SpecialTextProps {
+    text: string;
+    children: React.ReactNode[];
+    dropDownProps?: IDropdownProps[];
+}
+
+/**
+ * Maps SpecialText children to DropdownItems in DropDown
+ * @param {React.ReactNode[0]} children - Elements in the DropDown
+ * @returns {React.ReactNode[]} - Array of valid DropdownItems
+ */
+const formatList = (children: React.ReactNode[]): React.ReactNode[] =>
+    children.map((child): React.ReactElement | null => {
+        if (child && isValidElement(child)) {
+            const val = child.props.value;
+            return <DropdownItem {...child.props} children={child} key={val} />;
+        } else return null;
+    });
+
+export const SpecialText: React.FC<SpecialTextProps> = ({
+    text,
+    children,
+    dropDownProps,
+    ...props
+}): React.ReactElement => {
+    const dropDownOptions = Children.toArray(children);
+
+    return (
+        <StyledDiv {...props}>
+            <Dropdown
+                dropdownButton={<StyledDropDownText>{text}</StyledDropDownText>}
+                {...dropDownProps}
+            >
+                {formatList(dropDownOptions)}
+            </Dropdown>
+        </StyledDiv>
+    );
+};
+
+const StyledDiv = styled.div``;
+
+const StyledDropDownText = styled(SmallText)`
+    &:hover {
+        font-weight: bold;
+    }
+
+    ${({ theme }): string => `
+        color: ${theme.colors.statusColors.orange};
+    `}
+`;
+
+export default SpecialText;

src/Containers/index.ts

@@ -98,3 +98,4 @@ export * from './InfoHeader/InfoHeader';
 export * from './StoreSelector/StoreSelector'; 
 export * from './ScreenFlashEffect/ScreenFlashEffect'; 
 export * from './PanelCard/PanelCard';
+export * from './SpecialText/SpecialText';