@times-components/ts-components 1.98.0 → 1.98.2-alpha.5

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.98.1](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.98.0...@times-components/ts-components@1.98.1) (2024-07-08)
+
+
+### Bug Fixes
+
+* **TMD-529:** add background colour to image container ([#3883](https://github.com/newsuk/times-components/issues/3883)) ([034e31d](https://github.com/newsuk/times-components/commit/034e31dd00463ff6ec431ca7425179e1ad5495c6))
+
+
+
+
+
 # [1.98.0](https://github.com/newsuk/times-components/compare/@times-components/ts-components@1.97.1...@times-components/ts-components@1.98.0) (2024-07-02)
 
 

package/dist/assets/TooltipIcon.d.ts

@@ -0,0 +1,2 @@
+declare const TooltipIcon: (props: any) => JSX.Element;
+export default TooltipIcon;

package/dist/assets/TooltipIcon.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+const TooltipIcon = (props) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, fill: "none" }, props),
+    React.createElement("mask", { id: "a", width: 16, height: 16, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
+            maskType: 'alpha'
+        } },
+        React.createElement("path", { fill: "currentcolor", d: "M7.333 4.667h1.334V6H7.334V4.667ZM7.333 7.333h1.334v4H7.334v-4Z" }),
+        React.createElement("path", { fill: "currentcolor", fillRule: "evenodd", d: "M1.333 8A6.67 6.67 0 0 1 8 1.333 6.67 6.67 0 0 1 14.667 8 6.67 6.67 0 0 1 8 14.667 6.67 6.67 0 0 1 1.333 8Zm1.334 0A5.34 5.34 0 0 0 8 13.333 5.34 5.34 0 0 0 13.334 8 5.34 5.34 0 0 0 8 2.667 5.34 5.34 0 0 0 2.667 8Z", clipRule: "evenodd" })),
+    React.createElement("g", { mask: "url(#a)" },
+        React.createElement("path", { fill: "currentcolor", d: "M0 0h16v16H0z" }))));
+export default TooltipIcon;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVG9vbHRpcEljb24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvYXNzZXRzL1Rvb2x0aXBJY29uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMvQixNQUFNLFdBQVcsR0FBRyxDQUFDLEtBQVUsRUFBRSxFQUFFLENBQUMsQ0FDbEMsMkNBQ0UsS0FBSyxFQUFDLDRCQUE0QixFQUNsQyxLQUFLLEVBQUUsRUFBRSxFQUNULE1BQU0sRUFBRSxFQUFFLEVBQ1YsSUFBSSxFQUFDLE1BQU0sSUFDUCxLQUFLO0lBRVQsOEJBQ0UsRUFBRSxFQUFDLEdBQUcsRUFDTixLQUFLLEVBQUUsRUFBRSxFQUNULE1BQU0sRUFBRSxFQUFFLEVBQ1YsQ0FBQyxFQUFFLENBQUMsRUFDSixDQUFDLEVBQUUsQ0FBQyxFQUNKLFNBQVMsRUFBQyxnQkFBZ0IsRUFDMUIsS0FBSyxFQUFFO1lBQ0wsUUFBUSxFQUFFLE9BQU87U0FDbEI7UUFFRCw4QkFDRSxJQUFJLEVBQUMsY0FBYyxFQUNuQixDQUFDLEVBQUMsaUVBQWlFLEdBQ25FO1FBQ0YsOEJBQ0UsSUFBSSxFQUFDLGNBQWMsRUFDbkIsUUFBUSxFQUFDLFNBQVMsRUFDbEIsQ0FBQyxFQUFDLHdOQUF3TixFQUMxTixRQUFRLEVBQUMsU0FBUyxHQUNsQixDQUNHO0lBQ1AsMkJBQUcsSUFBSSxFQUFDLFNBQVM7UUFDZiw4QkFBTSxJQUFJLEVBQUMsY0FBYyxFQUFDLENBQUMsRUFBQyxlQUFlLEdBQUcsQ0FDNUMsQ0FDQSxDQUNQLENBQUM7QUFDRixlQUFlLFdBQVcsQ0FBQyJ9

package/dist/assets/index.d.ts

@@ -0,0 +1 @@
+export { default as TooltipIcon } from '../assets/TooltipIcon';

package/dist/assets/index.js

@@ -0,0 +1,2 @@
+export { default as TooltipIcon } from '../assets/TooltipIcon';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvYXNzZXRzL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsT0FBTyxJQUFJLFdBQVcsRUFBRSxNQUFNLHVCQUF1QixDQUFDIn0=

package/dist/components/job-title/__tests__/index.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/components/job-title/__tests__/index.test.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import { JobTitleTooltip, JobTitlePopover, JobTitle } from '../job-title';
+import * as ResizeObserverModule from 'resize-observer-polyfill';
+window.ResizeObserver = ResizeObserverModule.default;
+describe('JobTitle - Smaller Devices', () => {
+    it('renders the Job title Popover', () => {
+        const { asFragment, getByTestId } = render(React.createElement(JobTitle, { isLargeDevice: false, contractualTitle: "Contractual Title" }));
+        expect(asFragment()).toMatchSnapshot();
+        expect(getByTestId('Popover')).toBeVisible();
+    });
+});
+describe('JobTitle - Larger Devices', () => {
+    it('renders the Job title Tooltip on larger devices', () => {
+        const { asFragment, getByTestId } = render(React.createElement(JobTitle, { isLargeDevice: true, contractualTitle: "Contractual Title" }));
+        expect(asFragment()).toMatchSnapshot();
+        expect(getByTestId('Tooltip')).toBeVisible();
+    });
+});
+describe('JobTitleTooltip', () => {
+    it('Renders the tooltip when clicked', async () => {
+        const { getByRole, asFragment, getByTestId, getByText, queryByTestId, queryByText } = render(React.createElement(JobTitleTooltip, { contractualTitle: "Contractual Title Tooltip" }));
+        expect(queryByTestId('Tooltip-context')).not.toBeVisible();
+        expect(queryByText('Contractual Title Tooltip')).not.toBeVisible();
+        fireEvent.mouseEnter(getByRole('button'));
+        expect(asFragment()).toMatchSnapshot();
+        expect(getByTestId('Tooltip')).toBeVisible();
+        expect(getByText('Contractual Title Tooltip')).toBeVisible();
+    });
+});
+describe('JobTitlePopover', () => {
+    it('Renders the Popover when clicked', () => {
+        const { asFragment, getByRole, getByText, queryByText, queryByTestId, getByTestId } = render(React.createElement(JobTitlePopover, { contractualTitle: "Contractual Title Popover" }));
+        expect(queryByTestId('Popover-context')).not.toBeVisible();
+        expect(queryByText('Contractual Title Popover')).not.toBeVisible();
+        fireEvent.click(getByRole('button'));
+        expect(asFragment()).toMatchSnapshot();
+        expect(getByTestId('Popover')).toBeVisible();
+        expect(getByText('Contractual Title Popover')).toBeVisible();
+        const closeButton = getByTestId('close-button');
+        expect(closeButton).toBeVisible();
+    });
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXgudGVzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2pvYi10aXRsZS9fX3Rlc3RzX18vaW5kZXgudGVzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sMkJBQTJCLENBQUM7QUFDbkMsT0FBTyxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUMzRCxPQUFPLEVBQUUsZUFBZSxFQUFFLGVBQWUsRUFBRSxRQUFRLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDMUUsT0FBTyxLQUFLLG9CQUFvQixNQUFNLDBCQUEwQixDQUFDO0FBRWhFLE1BQWMsQ0FBQyxjQUFjLEdBQUcsb0JBQW9CLENBQUMsT0FBTyxDQUFDO0FBRTlELFFBQVEsQ0FBQyw0QkFBNEIsRUFBRSxHQUFHLEVBQUU7SUFDMUMsRUFBRSxDQUFDLCtCQUErQixFQUFFLEdBQUcsRUFBRTtRQUN2QyxNQUFNLEVBQUUsVUFBVSxFQUFFLFdBQVcsRUFBRSxHQUFHLE1BQU0sQ0FDeEMsb0JBQUMsUUFBUSxJQUFDLGFBQWEsRUFBRSxLQUFLLEVBQUUsZ0JBQWdCLEVBQUMsbUJBQW1CLEdBQUcsQ0FDeEUsQ0FBQztRQUNGLE1BQU0sQ0FBQyxVQUFVLEVBQUUsQ0FBQyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3ZDLE1BQU0sQ0FBQyxXQUFXLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUMvQyxDQUFDLENBQUMsQ0FBQztBQUNMLENBQUMsQ0FBQyxDQUFDO0FBRUgsUUFBUSxDQUFDLDJCQUEyQixFQUFFLEdBQUcsRUFBRTtJQUN6QyxFQUFFLENBQUMsaURBQWlELEVBQUUsR0FBRyxFQUFFO1FBQ3pELE1BQU0sRUFBRSxVQUFVLEVBQUUsV0FBVyxFQUFFLEdBQUcsTUFBTSxDQUN4QyxvQkFBQyxRQUFRLElBQUMs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

package/dist/components/job-title/assets/close-icon.d.ts

@@ -0,0 +1,2 @@
+declare const CloseIcon: () => JSX.Element;
+export default CloseIcon;

package/dist/components/job-title/assets/close-icon.js

@@ -0,0 +1,5 @@
+import React from 'react';
+const CloseIcon = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 12, height: 12, viewBox: "0 0 14 14", fill: "none" },
+    React.createElement("path", { d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z", fill: "#333333" })));
+export default CloseIcon;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xvc2UtaWNvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2pvYi10aXRsZS9hc3NldHMvY2xvc2UtaWNvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE1BQU0sU0FBUyxHQUFHLEdBQUcsRUFBRSxDQUFDLENBQ3RCLDZCQUNFLEtBQUssRUFBQyw0QkFBNEIsRUFDbEMsS0FBSyxFQUFFLEVBQUUsRUFDVCxNQUFNLEVBQUUsRUFBRSxFQUNWLE9BQU8sRUFBQyxXQUFXLEVBQ25CLElBQUksRUFBQyxNQUFNO0lBRVgsOEJBQ0UsQ0FBQyxFQUFDLHVHQUF1RyxFQUN6RyxJQUFJLEVBQUMsU0FBUyxHQUNkLENBQ0UsQ0FDUCxDQUFDO0FBRUYsZUFBZSxTQUFTLENBQUMifQ==

package/dist/components/job-title/job-title.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const JobTitleTooltip: React.FC<{
+    contractualTitle: string;
+}>;
+export declare const JobTitlePopover: React.FC<{
+    contractualTitle: string;
+}>;
+export declare const JobTitle: React.FC<{
+    contractualTitle: string;
+    isLargeDevice: boolean;
+}>;

package/dist/components/job-title/job-title.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { TooltipIcon } from '../../assets';
+import { CloseButton, IconButton, Popover, PopoverContext, PopoverHeader, Tooltip, TooltipContext } from './styles';
+import CloseIcon from './assets/close-icon';
+export const JobTitleTooltip = ({ contractualTitle }) => {
+    const [tooltipOpen, setTooltipOpen] = React.useState(false);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, null,
+            React.createElement(TooltipContext, { "data-testid": "Tooltip-context", isOpen: tooltipOpen }, contractualTitle),
+            React.createElement(IconButton, { "aria-label": "See contractual title, button", "data-testid": "Tooltip", onMouseOver: () => setTooltipOpen(true), onMouseOut: () => setTooltipOpen(false) },
+                React.createElement(TooltipIcon, null)))));
+};
+export const JobTitlePopover = ({ contractualTitle }) => {
+    const [popoverOpen, setPopoverOpen] = React.useState(false);
+    const togglePopover = () => {
+        setPopoverOpen(!popoverOpen);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Popover, null,
+            React.createElement(PopoverContext, { "data-testid": "Popover-context", isOpen: popoverOpen },
+                React.createElement(PopoverHeader, null,
+                    React.createElement("div", null, contractualTitle),
+                    React.createElement(CloseButton, { "data-testid": "close-button", onClick: togglePopover },
+                        React.createElement(CloseIcon, null)))),
+            React.createElement(IconButton, { "aria-label": "See contractual title, button", "data-testid": "Popover", onClick: togglePopover },
+                React.createElement(TooltipIcon, null)))));
+};
+export const JobTitle = ({ contractualTitle, isLargeDevice }) => {
+    return isLargeDevice ? (React.createElement(JobTitleTooltip, { contractualTitle: contractualTitle, "data-testid": "Tooltip" })) : (React.createElement(JobTitlePopover, { contractualTitle: contractualTitle, "data-testid": "Popover" }));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiam9iLXRpdGxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvam9iLXRpdGxlL2pvYi10aXRsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDM0MsT0FBTyxFQUNMLFdBQVcsRUFDWCxVQUFVLEVBQ1YsT0FBTyxFQUNQLGNBQWMsRUFDZCxhQUFhLEVBQ2IsT0FBTyxFQUNQLGNBQWMsRUFDZixNQUFNLFVBQVUsQ0FBQztBQUNsQixPQUFPLFNBQVMsTUFBTSxxQkFBcUIsQ0FBQztBQUU1QyxNQUFNLENBQUMsTUFBTSxlQUFlLEdBQTJDLENBQUMsRUFDdEUsZ0JBQWdCLEVBQ2pCLEVBQUUsRUFBRTtJQUNILE1BQU0sQ0FBQyxXQUFXLEVBQUUsY0FBYyxDQUFDLEdBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUU1RCxPQUFPLENBQ0w7UUFDRSxvQkFBQyxPQUFPO1lBQ04sb0JBQUMsY0FBYyxtQkFBYSxpQkFBaUIsRUFBQyxNQUFNLEVBQUUsV0FBVyxJQUM5RCxnQkFBZ0IsQ0FDRjtZQUNqQixvQkFBQyxVQUFVLGtCQUNFLCtCQUErQixpQkFDOUIsU0FBUyxFQUNyQixXQUFXLEVBQUUsR0FBRyxFQUFFLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxFQUN2QyxVQUFVLEVBQUUsR0FBRyxFQUFFLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQztnQkFFdkMsb0JBQUMsV0FBVyxPQUFHLENBQ0osQ0FDTCxDQUNULENBQ0osQ0FBQztBQUNKLENBQUMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLGVBQWUsR0FBMkMsQ0FBQyxFQUN0RSxnQkFBZ0IsRUFDakIsRUFBRSxFQUFFO0lBQ0gsTUFBTSxDQUFDLFdBQVcsRUFBRSxjQUFjLENBQUMsR0FBRyxLQUFLLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBRTVELE1BQU0sYUFBYSxHQUFHLEdBQUcsRUFBRTtRQUN6QixjQUFjLENBQUMsQ0FBQyxXQUFXLENBQUMsQ0FBQztJQUMvQixDQUFDLENBQUM7SUFFRixPQUFPLENBQ0w7UUFDRSxvQkFBQyxPQUFPO1lBQ04sb0JBQUMsY0FBYyxtQkFBYSxpQkFBaUIsRUFBQyxNQUFNLEVBQUUsV0FBVztnQkFDL0Qsb0JBQUMsYUFBYTtvQkFDWixpQ0FBTSxnQkFBZ0IsQ0FBTztvQkFDN0Isb0JBQUMsV0FBVyxtQkFBYSxjQUFjLEVBQUMsT0FBTyxFQUFFLGFBQWE7d0JBQzVELG9CQUFDLFNBQVMsT0FBRyxDQUNELENBQ0EsQ0FDRDtZQUNqQixvQkFBQyxVQUFVLGtCQUNFLCtCQUErQixpQkFDOUIsU0FBUyxFQUNyQixPQUFPLEVBQUUsYUFBYTtnQkFFdEIsb0JBQUMsV0FBVyxPQUFHLENBQ0osQ0FDTCxDQUNULENBQ0osQ0FBQztBQUNKLENBQUMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FHaEIsQ0FBQyxFQUFFLGdCQUFnQixFQUFFLGFBQWEsRUFBRSxFQUFFLEVBQUU7SUFDM0MsT0FBTyxhQUFhLENBQUMsQ0FBQyxDQUFDLENBQ3JCLG9CQUFDLGVBQWUsSUFDZCxnQkFBZ0IsRUFBRSxnQkFBZ0IsaUJBQ3RCLFNBQVMsR0FDckIsQ0FDSCxDQUFDLENBQUMsQ0FBQyxDQUNGLG9CQUFDLGVBQWUsSUFDZCxnQkFBZ0IsRUFBRSxnQkFBZ0IsaUJBQ3RCLFNBQVMsR0FDckIsQ0FDSCxDQUFDO0FBQ0osQ0FBQyxDQUFDIn0=

package/dist/components/job-title/styles.d.ts

@@ -0,0 +1,11 @@
+export declare const IconButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const Popover: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PopoverContext: import("styled-components").StyledComponent<"div", any, {
+    isOpen?: boolean | undefined;
+}, never>;
+export declare const PopoverHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const Tooltip: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TooltipContext: import("styled-components").StyledComponent<"div", any, {
+    isOpen?: boolean | undefined;
+}, never>;

package/dist/components/job-title/styles.js

@@ -0,0 +1,150 @@
+import styled from 'styled-components';
+export const IconButton = styled.button `
+  margin: 0;
+  padding: 0;
+  display: inline-grid;
+  column-gap: 8px;
+  grid-template-columns: repeat(1, auto);
+  width: 32px;
+  height: 32px;
+  margin-inline-start: 8px;
+  padding-inline: 8px;
+  padding-block: 8px;
+  box-sizing: border-box;
+  overflow: hidden;
+  border: none;
+  appearance: none;
+  background-color: #00000000;
+  border-radius: 50%;
+  color: #333333;
+  cursor: pointer;
+`;
+export const Popover = styled.div `
+  position: relative;
+  display: inline-block;
+`;
+export const PopoverContext = styled.div `
+  display: ${({ isOpen }) => (isOpen ? 'grid' : 'none')};
+  position: absolute;
+  top: -55px;
+  left: 4px;
+  box-shadow: 0px 20px 32px 0px #11111114;
+  border-radius: 0px;
+  border-style: none;
+  z-index: 80;
+
+  div {
+    margin: 0;
+    color: #333333;
+    border-radius: 0px;
+    background-color: #ffffff;
+    white-space: nowrap;
+
+    display: grid;
+    grid-template-areas:
+      'header close'
+      'content content';
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto 1fr;
+
+    /* Pointer Arrow */
+    &::after {
+      content: '';
+      position: absolute;
+      -webkit-transform: rotate(45deg);
+      -moz-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      transform: rotate(45deg);
+      box-sizing: border-box;
+      background-color: #ffffff;
+      width: 16px;
+      height: 16px;
+      left: 12px;
+      bottom: calc(-16px / 2);
+    }
+  }
+`;
+export const PopoverHeader = styled.div `
+  div {
+    display: flex;
+    grid-area: header;
+    align-items: center;
+    box-sizing: border-box;
+    box-shadow: 0px 20px 32px 0px #11111114;
+    border-radius: 0px;
+    border-style: none;
+    font-family: Roboto;
+    font-size: 1.4000000000000001rem;
+    line-height: 1.5;
+    font-weight: 500;
+    letter-spacing: 0em;
+    padding-inline: 24px;
+    padding-block: 16px;
+  }
+`;
+export const CloseButton = styled.button `
+  height: 48px;
+  width: 48px;
+  border-radius: 50%;
+  padding: 16px;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color 0.2s;
+  &:focus-visible {
+    background-color: #eeeeee;
+    border: 1px solid #000;
+  }
+  &:hover {
+    background-color: #eeeeee;
+  }
+`;
+export const Tooltip = styled.div `
+  position: relative;
+  display: inline-block;
+  z-index: 80;
+`;
+export const TooltipContext = styled.div `
+  display: ${({ isOpen }) => (isOpen ? 'grid' : 'none')};
+  position: absolute;
+  top: -34px;
+  left: 8px;
+  grid-template-areas:
+    'header close'
+    'content content';
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto 1fr;
+
+  color: rgb(255, 255, 255);
+  background-color: rgb(17, 17, 17);
+  font-family: 'Roboto';
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 500;
+  letter-spacing: 0em;
+  padding-inline: 8px;
+  padding-block: 8px;
+  white-space: nowrap;
+
+  /* Pointer Arrow */
+  &::after {
+    content: '';
+    position: absolute;
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    box-sizing: border-box;
+    background-color: #ffffff;
+    width: 4px;
+    height: 4px;
+    left: 14px;
+    bottom: calc(-4px / 2);
+    box-sizing: border-box;
+    background-color: rgb(17, 17, 17);
+  }
+`;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvam9iLXRpdGxlL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLE1BQU0sTUFBTSxtQkFBbUIsQ0FBQztBQUV2QyxNQUFNLENBQUMsTUFBTSxVQUFVLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7OztDQW1CdEMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLE9BQU8sR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFBOzs7Q0FHaEMsQ0FBQztBQUNGLE1BQU0sQ0FBQyxNQUFNLGNBQWMsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFzQjthQUNqRCxDQUFDLEVBQUUsTUFBTSxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBdUN0RCxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sYUFBYSxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBaUJ0QyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sV0FBVyxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBb0J2QyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sT0FBTyxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUE7Ozs7Q0FJaEMsQ0FBQztBQUNGLE1BQU0sQ0FBQyxNQUFNLGNBQWMsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFzQjthQUNqRCxDQUFDLEVBQUUsTUFBTSxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztDQXFDdEQsQ0FBQyJ9

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { BreakingArticleFlag, LiveArticleFlag } from './components/article-flag/
 export { ArticleFlag, ArticleFlags, NewArticleFlag, UpdatedArticleFlag, ExclusiveArticleFlag, SponsoredArticleFlag, LongReadArticleFlag } from './components/article-flag/ArticleFlag';
 export { Timelines } from './components/in-article-timelines/Timelines';
 export { SaveStar } from './components/save-star/SaveStar';
+export { JobTitle } from './components/job-title/job-title';
 export { AutoNewsletterPuff } from './components/newsletter-puff/AutoNewsletterPuff';
 export { InlineNewsletterPuff } from './components/newsletter-puff/InlineNewsletterPuff';
 export { PreviewNewsletterPuff } from './components/newsletter-puff/preview-newsletter-puff/PreviewNewsletterPuff';

package/dist/index.js

@@ -8,6 +8,7 @@ export { BreakingArticleFlag, LiveArticleFlag } from './components/article-flag/
 export { ArticleFlag, ArticleFlags, NewArticleFlag, UpdatedArticleFlag, ExclusiveArticleFlag, SponsoredArticleFlag, LongReadArticleFlag } from './components/article-flag/ArticleFlag';
 export { Timelines } from './components/in-article-timelines/Timelines';
 export { SaveStar } from './components/save-star/SaveStar';
+export { JobTitle } from './components/job-title/job-title';
 // Newsletter Components
 export { AutoNewsletterPuff } from './components/newsletter-puff/AutoNewsletterPuff';
 export { InlineNewsletterPuff } from './components/newsletter-puff/InlineNewsletterPuff';
@@ -40,4 +41,4 @@ export { UpdatedTimeProvider } from './helpers/time/UpdatedTimeProvider';
 export { WelcomeBanner } from './components/welcome-banner/WelcomeBanner';
 export { default as safeDecodeURIComponent } from './utils/safeDecodeURIComponent';
 export { ArticleSidebar } from './components/article-sidebar/ArticleSidebar';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEscUJBQXFCO0FBQ3JCLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQztBQUMzRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sNENBQTRDLENBQUM7QUFDdEUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHVDQUF1QyxDQUFDO0FBQ3hFLE9BQU8sRUFDTCxvQkFBb0IsRUFDckIsTUFBTSxxRUFBcUUsQ0FBQztBQUM3RSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0RBQWdELENBQUM7QUFDNUUsT0FBTyxFQUNMLG1CQUFtQixFQUNuQixlQUFlLEVBQ2hCLE1BQU0sMkNBQTJDLENBQUM7QUFDbkQsT0FBTyxFQUNMLFdBQVcsRUFDWCxZQUFZLEVBQ1osY0FBYyxFQUNkLGtCQUFrQixFQUNsQixvQkFBb0IsRUFDcEIsb0JBQW9CLEVBQ3BCLG1CQUFtQixFQUNwQixNQUFNLHVDQUF1QyxDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw2Q0FBNkMsQ0FBQztBQUN4RSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFFM0Qsd0JBQXdCO0FBQ3hCLE9BQU8sRUFDTCxrQkFBa0IsRUFDbkIsTUFBTSxpREFBaUQsQ0FBQztBQUN6RCxPQUFPLEVBQ0wsb0JBQW9CLEVBQ3JCLE1BQU0sbURBQW1ELENBQUM7QUFDM0QsT0FBTyxFQUNMLHFCQUFxQixFQUN0QixNQUFNLDRFQUE0RSxDQUFDO0FBRXBGLG1CQUFtQjtBQUNuQixPQUFPLEVBQ0wsb0JBQW9CLEVBQ3JCLE1BQU0sMERBQTBELENBQUM7QUFFbEUsT0FBTyxFQUNMLDBCQUEwQixFQUMzQixNQUFNLHVFQUF1RSxDQUFDO0FBQy9FLE9BQU8sRUFDTCxvQkFBb0IsRUFDckIsTUFBTSwwREFBMEQsQ0FBQztBQUNsRSxPQUFPLEVBQ0wsOEJBQThCLEVBQy9CLE1BQU0sK0VBQStFLENBQUM7QUFDdkYsT0FBTyxFQUNMLHFCQUFxQixFQUN0QixNQUFNLDREQUE0RCxDQUFDO0FBQ3BFLE9BQU8sRUFDTCxtQkFBbUIsRUFDcEIsTUFBTSx3REFBd0QsQ0FBQztBQUNoRSxPQUFPLEVBQ0wsc0JBQXNCLEVBQ3ZCLE1BQU0sK0RBQStELENBQUM7QUFDdkUsT0FBTyxFQUNMLHVCQUF1QixFQUN4QixNQUFNLGlFQUFpRSxDQUFDO0FBRXpFLE9BQU8sRUFDTCxpQkFBaUIsRUFDbEIsTUFBTSxvREFBb0QsQ0FBQztBQUM1RCxPQUFPLEVBQ0wsa0JBQWtCLEVBQ25CLE1BQU0sc0RBQXNELENBQUM7QUFDOUQsT0FBTyxFQUNMLGdCQUFnQixFQUNqQixNQUFNLGtEQUFrRCxDQUFDO0FBQzFELE9BQU8sRUFDTCxtQkFBbUIsRUFDcEIsTUFBTSx5REFBeUQsQ0FBQztBQUVqRSw2QkFBNkI7QUFDN0IsT0FBTyxFQUNMLGdCQUFnQixFQUNqQixNQUFNLG9EQUFvRCxDQUFDO0FBRTVELFVBQVU7QUFDVixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDOUQsT0FBTyxFQUNMLGdCQUFnQixFQUNqQixNQUFNLCtDQUErQyxDQUFDO0FBQ3ZELE9BQU8sRUFDTCx1QkFBdUIsRUFDeEIsTUFBTSw0Q0FBNEMsQ0FBQztBQUVwRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDdkQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDJDQUEyQyxDQUFDO0FBQzFFLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQztBQUV2RSxPQUFPLEVBQ0wsT0FBTyxJQUFJLGFBQWEsRUFDekIsTUFBTSwyQ0FBMkMsQ0FBQztBQUVuRCxPQUFPLEVBQ0wsZ0JBQWdCLEVBQ2pCLE1BQU0saURBQWlELENBQUM7QUFFekQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFFekUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDJDQUEyQyxDQUFDO0FBQzFFLE9BQU8sRUFDTCxPQUFPLElBQUksc0JBQXNCLEVBQ2xDLE1BQU0sZ0NBQWdDLENBQUM7QUFDeEMsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLDZDQUE2QyxDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEscUJBQXFCO0FBQ3JCLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQztBQUMzRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sNENBQTRDLENBQUM7QUFDdEUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHVDQUF1QyxDQUFDO0FBQ3hFLE9BQU8sRUFDTCxvQkFBb0IsRUFDckIsTUFBTSxxRUFBcUUsQ0FBQztBQUM3RSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0RBQWdELENBQUM7QUFDNUUsT0FBTyxFQUNMLG1CQUFtQixFQUNuQixlQUFlLEVBQ2hCLE1BQU0sMkNBQTJDLENBQUM7QUFDbkQsT0FBTyxFQUNMLFdBQVcsRUFDWCxZQUFZLEVBQ1osY0FBYyxFQUNkLGtCQUFrQixFQUNsQixvQkFBb0IsRUFDcEIsb0JBQW9CLEVBQ3BCLG1CQUFtQixFQUNwQixNQUFNLHVDQUF1QyxDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw2Q0FBNkMsQ0FBQztBQUN4RSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDM0QsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBRTVELHdCQUF3QjtBQUN4QixPQUFPLEVBQ0wsa0JBQWtCLEVBQ25CLE1BQU0saURBQWlELENBQUM7QUFDekQsT0FBTyxFQUNMLG9CQUFvQixFQUNyQixNQUFNLG1EQUFtRCxDQUFDO0FBQzNELE9BQU8sRUFDTCxxQkFBcUIsRUFDdEIsTUFBTSw0RUFBNEUsQ0FBQztBQUVwRixtQkFBbUI7QUFDbkIsT0FBTyxFQUNMLG9CQUFvQixFQUNyQixNQUFNLDBEQUEwRCxDQUFDO0FBRWxFLE9BQU8sRUFDTCwwQkFBMEIsRUFDM0IsTUFBTSx1RUFBdUUsQ0FBQztBQUMvRSxPQUFPLEVBQ0wsb0JBQW9CLEVBQ3JCLE1BQU0sMERBQTBELENBQUM7QUFDbEUsT0FBTyxFQUNMLDhCQUE4QixFQUMvQixNQUFNLCtFQUErRSxDQUFDO0FBQ3ZGLE9BQU8sRUFDTCxxQkFBcUIsRUFDdEIsTUFBTSw0REFBNEQsQ0FBQztBQUNwRSxPQUFPLEVBQ0wsbUJBQW1CLEVBQ3BCLE1BQU0sd0RBQXdELENBQUM7QUFDaEUsT0FBTyxFQUNMLHNCQUFzQixFQUN2QixNQUFNLCtEQUErRCxDQUFDO0FBQ3ZFLE9BQU8sRUFDTCx1QkFBdUIsRUFDeEIsTUFBTSxpRUFBaUUsQ0FBQztBQUV6RSxPQUFPLEVBQ0wsaUJBQWlCLEVBQ2xCLE1BQU0sb0RBQW9ELENBQUM7QUFDNUQsT0FBTyxFQUNMLGtCQUFrQixFQUNuQixNQUFNLHNEQUFzRCxDQUFDO0FBQzlELE9BQU8sRUFDTCxnQkFBZ0IsRUFDakIsTUFBTSxrREFBa0QsQ0FBQztBQUMxRCxPQUFPLEVBQ0wsbUJBQW1CLEVBQ3BCLE1BQU0seURBQXlELENBQUM7QUFFakUsNkJBQTZCO0FBQzdCLE9BQU8sRUFDTCxnQkFBZ0IsRUFDakIsTUFBTSxvREFBb0QsQ0FBQztBQUU1RCxVQUFVO0FBQ1YsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQzlELE9BQU8sRUFDTCxnQkFBZ0IsRUFDakIsTUFBTSwrQ0FBK0MsQ0FBQztBQUN2RCxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3hCLE1BQU0sNENBQTRDLENBQUM7QUFFcEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwyQ0FBMkMsQ0FBQztBQUMxRSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFFdkUsT0FBTyxFQUNMLE9BQU8sSUFBSSxhQUFhLEVBQ3pCLE1BQU0sMkNBQTJDLENBQUM7QUFFbkQsT0FBTyxFQUNMLGdCQUFnQixFQUNqQixNQUFNLGlEQUFpRCxDQUFDO0FBRXpELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBRXpFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwyQ0FBMkMsQ0FBQztBQUMxRSxPQUFPLEVBQ0wsT0FBTyxJQUFJLHNCQUFzQixFQUNsQyxNQUFNLGdDQUFnQyxDQUFDO0FBQ3hDLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSw2Q0FBNkMsQ0FBQyJ9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@times-components/ts-components",
-  "version": "1.98.0",
+  "version": "1.98.2-alpha.5+a6ed338c5c",
   "description": "Reuseable Typescript React Components ",
   "main": "dist/index.js",
   "dev": "dist/index.js",
@@ -50,17 +50,18 @@
     "node": ">=8.9"
   },
   "dependencies": {
-    "@times-components/button": "2.10.61",
-    "@times-components/date-publication": "0.30.34",
-    "@times-components/icons": "2.22.12",
-    "@times-components/image": "6.18.0",
-    "@times-components/link": "3.17.34",
-    "@times-components/provider": "1.40.35",
-    "@times-components/provider-queries": "2.21.1",
-    "@times-components/related-articles": "6.17.74",
-    "@times-components/ts-slices": "1.9.22",
-    "@times-components/ts-styleguide": "1.50.34",
-    "@times-components/utils": "6.26.0",
+    "@times-components/button": "^2.10.61",
+    "@times-components/date-publication": "^0.30.34",
+    "@times-components/icons": "^2.22.12",
+    "@times-components/image": "^6.18.1",
+    "@times-components/link": "^3.17.34",
+    "@times-components/provider": "^1.40.35",
+    "@times-components/provider-queries": "^2.21.1",
+    "@times-components/related-articles": "^6.17.76-alpha.5+a6ed338c5c",
+    "@times-components/ts-newskit": "^1.189.1-alpha.7+a6ed338c5c",
+    "@times-components/ts-slices": "^1.9.22",
+    "@times-components/ts-styleguide": "^1.50.34",
+    "@times-components/utils": "^6.26.0",
     "algoliasearch": "4.9.0",
     "date-fns": "2.28.0",
     "date-fns-tz": "1.3.3",
@@ -82,9 +83,9 @@
     "@storybook/react": "6.5.16",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^12.1.2",
-    "@times-components/provider-test-tools": "1.29.3",
-    "@times-components/storybook": "4.12.34",
-    "@times-components/test-utils": "2.4.2",
+    "@times-components/provider-test-tools": "^1.29.3",
+    "@times-components/storybook": "^4.12.34",
+    "@times-components/test-utils": "^2.4.2",
     "@types/lodash.get": "4.4.6",
     "@types/lodash.keyby": "4.6.6",
     "@types/lodash.merge": "4.6.2",
@@ -98,6 +99,7 @@
     "mockdate": "3.0.5",
     "prettier": "1.14.3",
     "react": "16.9.0",
+    "resize-observer-polyfill": "^1.5.1",
     "tslint": "5.18.0",
     "tslint-config-prettier": "1.18.0",
     "typescript": "4.2.4"
@@ -115,5 +117,5 @@
       "@testing-library/jest-dom/extend-expect"
     ]
   },
-  "gitHead": "76d860884de39401156c4e743f686d336b50de75"
+  "gitHead": "a6ed338c5c5e14f1b69b5d0a80fb1664ac941e66"
 }