@thecb/components 7.5.1 → 7.5.2

package/dist/src/components/atoms/layouts/examples/motion-example/MotionExample.stories.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
+import page from "../../../../../../.storybook/page";
+import Motion from "../../Motion";
+import LayoutContentBlock from "../LayoutContentBlock";
+var position = {
+    relative: "relative",
+    absolute: "absolute"
+};
+var animate = {
+    open: "open",
+    closed: "closed"
+};
+var groupId = "props";
+var variants = {
+    open: {
+        height: "50vh",
+        opacity: 1,
+        transition: {
+            duration: 0.3,
+            ease: [0.04, 0.62, 0.23, 0.98],
+            staggerChildren: 0
+        }
+    },
+    closed: {
+        height: 0,
+        opacity: 0,
+        transition: {
+            duration: 0.3,
+            ease: [0.04, 0.62, 0.23, 0.98],
+            staggerChildren: 0,
+            staggerDirection: -1
+        }
+    }
+};
+export default page({
+    title: "Layouts|Basic Layouts/Motion",
+    Component: Motion
+});
+export var motion = function () { return (React.createElement(Motion, { position: select("position", position, "relative", groupId), padding: text("padding", "0", groupId), variants: variants, layoutTransition: boolean("layoutTransition", true, groupId), positionTransition: boolean("positionTransition", false, groupId), initial: "closed", animate: select("animate", animate, "open", groupId), exit: "closed" },
+    React.createElement(LayoutContentBlock, { height: "100%", width: "100%", layoutName: "Component Child" }))); };

package/dist/src/components/atoms/layouts/examples/reel-example/ReelExample.stories.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    title: any;
+    component: any;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};
+export default _default;
+export function reel(): JSX.Element;

package/dist/src/components/atoms/layouts/examples/reel-example/ReelExample.stories.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { text, boolean, select } from "@storybook/addon-knobs";
+import page from "../../../../../../.storybook/page";
+import Reel from "../../Reel";
+import LayoutContentBlock from "../LayoutContentBlock";
+var justifyContent = {
+    flexStart: "flex-start",
+    flexEnd: "flex-end",
+    center: "center",
+    spaceEvenly: "space-evenly"
+};
+var groupId = "props";
+export default page({
+    title: "Layouts|Basic Layouts/Reel",
+    Component: Reel
+});
+export var reel = function () { return (React.createElement(Reel, { childGap: text("childGap", "1rem", groupId), height: text("height", "auto", groupId), childWidth: text("childWidth", "auto", groupId), padding: text("padding", "1rem", groupId), justifyContent: select("justify-content", justifyContent, "flexStart", groupId), disableScroll: boolean("disableScroll", false, groupId) },
+    React.createElement(LayoutContentBlock, { height: "3.5rem", width: "8rem", layoutName: "Component Child" }),
+    React.createElement(LayoutContentBlock, { height: "3.5rem", width: "8rem", layoutName: "Component Child 2" }),
+    React.createElement(LayoutContentBlock, { height: "3.5rem", width: "8rem", layoutName: "Component Child 3 " }),
+    React.createElement(LayoutContentBlock, { height: "3.5rem", width: "8rem", layoutName: "Component Child 4" }))); };

package/dist/src/components/atoms/layouts/examples/sidebar-example/SidebarExample.d.ts

@@ -0,0 +1,7 @@
+export default SidebarExample;
+declare function SidebarExample({ width, onRight, childGap, children }: {
+    width: any;
+    onRight: any;
+    childGap: any;
+    children: any;
+}): JSX.Element;

package/dist/src/components/atoms/layouts/examples/sidebar-example/SidebarExample.js

@@ -0,0 +1,7 @@
+import React from "react";
+import Sidebar from "../../Sidebar";
+var SidebarExample = function (_a) {
+    var width = _a.width, onRight = _a.onRight, childGap = _a.childGap, children = _a.children;
+    return (React.createElement(Sidebar, { width: width, sidebarOnRight: onRight, childGap: childGap }, children));
+};
+export default SidebarExample;

package/dist/src/components/atoms/layouts/examples/sidebar-example/SidebarExample.stories.d.ts

@@ -0,0 +1,11 @@
+declare namespace _default {
+    export const title: string;
+    export { SidebarExample as component };
+    export const decorators: ((storyFn: any) => JSX.Element)[];
+}
+export default _default;
+export function basicSidebar(): JSX.Element;
+export namespace basicSidebar {
+    const storyName: string;
+}
+import SidebarExample from "./SidebarExample";

package/dist/src/components/atoms/layouts/examples/sidebar-example/SidebarExample.stories.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { text, radios } from "@storybook/addon-knobs";
+import SidebarExample from "./SidebarExample";
+//import Stack from "../../Stack";
+import Switcher from "../../Switcher";
+import Cover from "../../Cover";
+import Center from "../../Center";
+import FixedSizeContainer from "../FixedSizeContainer";
+import ResizingContainer from "../ResizingContainer";
+import LayoutContentBlock from "../LayoutContentBlock";
+export default {
+    title: "Layouts/Basic Layouts/Sidebar",
+    component: SidebarExample,
+    decorators: [
+        function (storyFn) { return (React.createElement(Cover, null,
+            React.createElement("div", null),
+            React.createElement(Center, null, storyFn()),
+            React.createElement("div", null))); }
+    ]
+};
+var label = "Animate";
+var options = {
+    play: "play",
+    pause: "pause"
+};
+var defaultValue = "pause";
+var groupID = "RADIO-GROUP-1";
+export var basicSidebar = function () { return (React.createElement(ResizingContainer, { animate: radios(label, options, defaultValue, groupID), containerMax: text("Container Max", "60rem"), containerMin: text("Container Min", "25rem"), padding: "1rem" },
+    React.createElement(SidebarExample, { childGap: "0.5rem", width: "15rem" },
+        React.createElement(FixedSizeContainer, null,
+            React.createElement(Switcher, { breakpoint: "15rem" },
+                React.createElement(LayoutContentBlock, { height: "3rem", width: "2rem", layoutName: "First Tab" }),
+                React.createElement(LayoutContentBlock, { height: "3rem", width: "2rem", layoutName: "Second Tab" }),
+                React.createElement(LayoutContentBlock, { height: "3rem", width: "2rem", layoutName: "Third Tab" }))),
+        React.createElement(FixedSizeContainer, null,
+            React.createElement(Cover, { minHeight: "75vh" },
+                React.createElement("div", null),
+                React.createElement(Center, null,
+                    React.createElement(LayoutContentBlock, { layoutName: "Some great content", width: "20rem", height: "400px" })),
+                React.createElement("div", null)))))); };
+basicSidebar.storyName = "Sidebar and content";

package/dist/src/components/atoms/layouts/examples/stack-example/StackExample.d.ts

@@ -0,0 +1,7 @@
+export default StackExample;
+declare function StackExample({ numChildren, childGap, bottomItem, fullHeight }: {
+    numChildren: any;
+    childGap: any;
+    bottomItem: any;
+    fullHeight: any;
+}): JSX.Element;

package/dist/src/components/atoms/layouts/examples/stack-example/StackExample.js

@@ -0,0 +1,26 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from "react";
+import Stack from "../../Stack";
+import LayoutContentBlock from "../LayoutContentBlock";
+var generateChildren = function (number) {
+    var childArray = [];
+    for (var count = 0; count < number; count++) {
+        childArray = __spreadArray(__spreadArray([], childArray, true), [
+            React.createElement(LayoutContentBlock, { height: "2.5rem", layoutName: "Element ".concat(count + 1), key: "count ".concat(count) })
+        ], false);
+    }
+    return childArray;
+};
+var StackExample = function (_a) {
+    var numChildren = _a.numChildren, childGap = _a.childGap, bottomItem = _a.bottomItem, fullHeight = _a.fullHeight;
+    return (React.createElement(Stack, { childGap: childGap, bottomItem: bottomItem, fullHeight: fullHeight }, generateChildren(numChildren)));
+};
+export default StackExample;

package/dist/src/components/atoms/layouts/examples/stack-example/StackExample.stories.d.ts

@@ -0,0 +1,21 @@
+declare namespace _default {
+    export const title: string;
+    export { StackExample as component };
+    export const decorators: ((storyFn: any) => JSX.Element)[];
+}
+export default _default;
+export function basicStack(): JSX.Element;
+export namespace basicStack {
+    const storyName: string;
+}
+export function bottomItemStack(): JSX.Element;
+export namespace bottomItemStack {
+    const storyName_1: string;
+    export { storyName_1 as storyName };
+}
+export function splitStack(): JSX.Element;
+export namespace splitStack {
+    const storyName_2: string;
+    export { storyName_2 as storyName };
+}
+import StackExample from "./StackExample";

package/dist/src/components/atoms/layouts/examples/stack-example/StackExample.stories.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { text, number, boolean } from "@storybook/addon-knobs";
+import StackExample from "./StackExample";
+import Cover from "../../Cover";
+import Center from "../../Center";
+import FixedSizeContainer from "../FixedSizeContainer";
+import { TROUT_GREY } from "../../../../../constants/colors";
+export default {
+    title: "Layouts/Basic Layouts/Stack",
+    component: StackExample,
+    decorators: [
+        function (storyFn) { return (React.createElement(Cover, null,
+            React.createElement("div", null),
+            React.createElement(Center, null, storyFn()),
+            React.createElement("div", null))); }
+    ]
+};
+export var basicStack = function () { return (React.createElement(FixedSizeContainer, { width: text("Container Width", "30rem"), height: text("Container Height", "auto"), border: text("Container Border", "2px solid ".concat(TROUT_GREY)) },
+    React.createElement(StackExample, { numChildren: number("Number of children", 4), childGap: text("Space between children", "1rem"), bottomItem: text("Bottom item", ""), fullHeight: boolean("Full height", false) }))); };
+basicStack.storyName = "Basic Stack";
+export var bottomItemStack = function () { return (React.createElement(FixedSizeContainer, { width: "30rem", height: "20rem", border: text("Container Border", "2px solid ".concat(TROUT_GREY)) },
+    React.createElement(StackExample, { numChildren: 4, bottomItem: 4, fullHeight: true }))); };
+bottomItemStack.storyName = "Bottom Item Stack";
+export var splitStack = function () { return (React.createElement(FixedSizeContainer, { width: "30rem", height: "20rem", border: text("Container Border", "2px solid ".concat(TROUT_GREY)) },
+    React.createElement(StackExample, { numChildren: 4, bottomItem: 3, fullHeight: true }))); };
+splitStack.storyName = "Split Stack";

package/dist/src/components/atoms/layouts/examples/switcher-example/SwitcherExample.d.ts

@@ -0,0 +1,8 @@
+export default SwitcherExample;
+declare function SwitcherExample({ numChildren, breakpoint, largeChild, largeChildSize, maxChildren }: {
+    numChildren: any;
+    breakpoint: any;
+    largeChild: any;
+    largeChildSize: any;
+    maxChildren: any;
+}): JSX.Element;

package/dist/src/components/atoms/layouts/examples/switcher-example/SwitcherExample.js

@@ -0,0 +1,26 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from "react";
+import Switcher from "../../Switcher";
+import LayoutContentBlock from "../LayoutContentBlock";
+var generateChildren = function (number) {
+    var childArray = [];
+    for (var count = 0; count < number; count++) {
+        childArray = __spreadArray(__spreadArray([], childArray, true), [
+            React.createElement(LayoutContentBlock, { height: "3rem", layoutName: "Element ".concat(count + 1), key: "count ".concat(count) })
+        ], false);
+    }
+    return childArray;
+};
+var SwitcherExample = function (_a) {
+    var numChildren = _a.numChildren, breakpoint = _a.breakpoint, largeChild = _a.largeChild, largeChildSize = _a.largeChildSize, maxChildren = _a.maxChildren;
+    return (React.createElement(Switcher, { breakpoint: breakpoint, largeChild: largeChild, largeChildSize: largeChildSize, maxChildren: maxChildren }, generateChildren(numChildren)));
+};
+export default SwitcherExample;

package/dist/src/components/atoms/layouts/examples/switcher-example/SwitcherExample.stories.d.ts

@@ -0,0 +1,16 @@
+declare namespace _default {
+    export const title: string;
+    export { SwitcherExample as component };
+    export const decorators: ((storyFn: any) => JSX.Element)[];
+}
+export default _default;
+export function basicSwitcher(): JSX.Element;
+export namespace basicSwitcher {
+    const storyName: string;
+}
+export function childLimitSwitcher(): JSX.Element;
+export namespace childLimitSwitcher {
+    const storyName_1: string;
+    export { storyName_1 as storyName };
+}
+import SwitcherExample from "./SwitcherExample";

package/dist/src/components/atoms/layouts/examples/switcher-example/SwitcherExample.stories.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { text, radios, number } from "@storybook/addon-knobs";
+import SwitcherExample from "./SwitcherExample";
+import Cover from "../../Cover";
+import Center from "../../Center";
+import FixedSizeContainer from "../FixedSizeContainer";
+import ResizingContainer from "../ResizingContainer";
+export default {
+    title: "Layouts/Basic Layouts/Switcher",
+    component: SwitcherExample,
+    decorators: [
+        function (storyFn) { return (React.createElement(Cover, null,
+            React.createElement("div", null),
+            React.createElement(Center, null, storyFn()),
+            React.createElement("div", null))); }
+    ]
+};
+var label = "Animate";
+var options = {
+    play: "play",
+    pause: "pause"
+};
+var defaultValue = "pause";
+var groupID = "RADIO-GROUP-1";
+export var basicSwitcher = function () { return (React.createElement(ResizingContainer, { animate: radios(label, options, defaultValue, groupID), containerMax: text("Container Max", "45rem"), containerMin: text("Container Min", "12.5rem") },
+    React.createElement(SwitcherExample, { numChildren: 4, breakpoint: text("Switcher Breakpoint", "30rem") }))); };
+basicSwitcher.storyName = "Resizing Switcher";
+export var childLimitSwitcher = function () { return (React.createElement(FixedSizeContainer, { width: text("Container Width", "40rem"), floatingLabel: "Switcher" },
+    React.createElement(SwitcherExample, { numChildren: number("Number of Children", 4), maxChildren: number("Max Children", 6), largeChild: number("Large Child", 2), largeChildSize: number("Large Child Size", 1) }))); };
+childLimitSwitcher.storyName = "Limited Children Switcher";

package/dist/src/components/atoms/layouts/index.d.ts

@@ -0,0 +1,13 @@
+import Box from "./Box.js";
+import Center from "./Center.js";
+import Cluster from "./Cluster.js";
+import Grid from "./Grid.js";
+import Sidebar from "./Sidebar.js";
+import Stack from "./Stack.js";
+import Cover from "./Cover.js";
+import Frame from "./Frame.js";
+import Switcher from "./Switcher.js";
+import Imposter from "./Imposter.js";
+import Motion from "./Motion.js";
+import Reel from "./Reel.js";
+export { Box, Center, Cluster, Grid, Sidebar, Stack, Cover, Frame, Switcher, Imposter, Motion, Reel };

package/dist/src/components/atoms/layouts/index.js

@@ -0,0 +1,13 @@
+import Box from "./Box.js";
+import Center from "./Center.js";
+import Cluster from "./Cluster.js";
+import Grid from "./Grid.js";
+import Sidebar from "./Sidebar.js";
+import Stack from "./Stack.js";
+import Cover from "./Cover.js";
+import Frame from "./Frame.js";
+import Switcher from "./Switcher.js";
+import Imposter from "./Imposter.js";
+import Motion from "./Motion.js";
+import Reel from "./Reel.js";
+export { Box, Center, Cluster, Grid, Sidebar, Stack, Cover, Frame, Switcher, Imposter, Motion, Reel };

package/dist/src/components/atoms/line-item/LineItem.d.ts

@@ -0,0 +1,5 @@
+declare const _default: ({ variant, ...props }: {
+    [x: string]: any;
+    variant?: any;
+}) => any;
+export default _default;

package/dist/src/components/atoms/line-item/LineItem.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Cluster, Stack } from "../layouts";
+import Paragraph from "../paragraph";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./LineItem.theme";
+var LineItem = function (_a) {
+    var description = _a.description, subDescription = _a.subDescription, amount = _a.amount, themeValues = _a.themeValues;
+    return (React.createElement(Cluster, { nowrap: true, justify: "space-between", align: "start" },
+        React.createElement(Stack, { childGap: "0px" },
+            React.createElement(Paragraph, { variant: themeValues.paragraphVariant, weight: themeValues.weightTitle }, description),
+            React.createElement(Paragraph, { variant: themeValues.paragraphVariant, weight: "400" }, subDescription)),
+        React.createElement(Paragraph, { variant: themeValues.paragraphVariant, weight: "600", extraStyles: "margin: 0; text-align: end; min-width: fit-content; padding-left: 32px;" }, amount)));
+};
+export default themeComponent(LineItem, "LineItem", fallbackValues, "default");

package/dist/src/components/atoms/line-item/LineItem.stories.d.ts

@@ -0,0 +1,7 @@
+export default story;
+export function lineItem(): JSX.Element;
+declare const story: {
+    title: any;
+    component: any;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};

package/dist/src/components/atoms/line-item/LineItem.stories.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { text } from "@storybook/addon-knobs";
+import LineItem from "./LineItem";
+import page from "../../../../.storybook/page";
+var story = page({
+    title: "Components|Atoms/LineItem",
+    Component: LineItem
+});
+export default story;
+export var lineItem = function () { return (React.createElement(LineItem, { description: text("description", "Foo", "props"), subDescription: text("subDescription", "Bar", "props"), amount: text("amount", "$4.00", "props") })); };

package/dist/src/components/atoms/line-item/LineItem.theme.d.ts

@@ -0,0 +1,16 @@
+export namespace fallbackValues {
+    export { weightTitle };
+    export { paragraphVariant };
+}
+declare namespace weightTitle {
+    const _default: string;
+    export { _default as default };
+    export const small: string;
+}
+declare namespace paragraphVariant {
+    const _default_1: string;
+    export { _default_1 as default };
+    const small_1: string;
+    export { small_1 as small };
+}
+export {};

package/dist/src/components/atoms/line-item/LineItem.theme.js

@@ -0,0 +1,6 @@
+var weightTitle = { default: "600", small: "400" };
+var paragraphVariant = { default: "pL", small: "pS" };
+export var fallbackValues = {
+    weightTitle: weightTitle,
+    paragraphVariant: paragraphVariant
+};

package/dist/src/components/atoms/line-item/index.d.ts

@@ -0,0 +1,2 @@
+export default LineItem;
+import LineItem from "./LineItem";

package/dist/src/components/atoms/line-item/index.js

@@ -0,0 +1,2 @@
+import LineItem from "./LineItem";
+export default LineItem;

package/dist/src/components/atoms/link/ExternalLink.d.ts

@@ -0,0 +1,14 @@
+export default ExternalLink;
+declare function ExternalLink({ href, newTab, size, lineHeight, weight, extraStyles, variant, tabIndex, dataQa, ariaLabel, children }: {
+    href?: string | undefined;
+    newTab?: boolean | undefined;
+    size?: string | undefined;
+    lineHeight?: string | undefined;
+    weight?: string | undefined;
+    extraStyles?: string | undefined;
+    variant?: string | undefined;
+    tabIndex?: string | undefined;
+    dataQa: any;
+    ariaLabel: any;
+    children: any;
+}): JSX.Element;

package/dist/src/components/atoms/link/ExternalLink.js

@@ -0,0 +1,14 @@
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { fallbackValues } from "./Link.theme";
+import { createThemeValues } from "../../../util/themeUtils";
+import { StyledExternalLink } from "./ExternalLink.styled";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { safeChildren } from "../../../util/general";
+var ExternalLink = function (_a) {
+    var _b = _a.href, href = _b === void 0 ? "" : _b, _c = _a.newTab, newTab = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "1rem" : _d, _e = _a.lineHeight, lineHeight = _e === void 0 ? "1.5rem" : _e, _f = _a.weight, weight = _f === void 0 ? FONT_WEIGHT_REGULAR : _f, _g = _a.extraStyles, extraStyles = _g === void 0 ? "" : _g, _h = _a.variant, variant = _h === void 0 ? "primary" : _h, _j = _a.tabIndex, tabIndex = _j === void 0 ? "0" : _j, dataQa = _a.dataQa, ariaLabel = _a.ariaLabel, children = _a.children;
+    var themeContext = useContext(ThemeContext);
+    var themeValues = createThemeValues(themeContext, fallbackValues, "Link", variant);
+    return (React.createElement(StyledExternalLink, { href: href, target: newTab ? "_blank" : "", color: themeValues.externalLinkColor, size: size, lineheight: lineHeight, weight: weight, hovercolor: themeValues.hoverColor, activeColor: themeValues.activeColor, fontFamily: themeValues.fontFamily, tabIndex: tabIndex, extrastyles: extraStyles, rel: newTab ? "noopener" : "", "data-qa": dataQa, "aria-label": ariaLabel }, safeChildren(children, React.createElement("span", null))));
+};
+export default ExternalLink;

package/dist/src/components/atoms/link/ExternalLink.styled.d.ts

@@ -0,0 +1 @@
+export const StyledExternalLink: any;

package/dist/src/components/atoms/link/ExternalLink.styled.js

@@ -0,0 +1,64 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import styled from "styled-components";
+import { ROYAL_BLUE } from "../../../constants/colors";
+/*
+  The extracting of props and the disabling of the eslint rule is to stop React from complaining about
+  unrecognized DOM attributes.
+*/
+/* eslint-disable no-unused-vars */
+export var StyledExternalLink = styled(function (_a) {
+    var hoverColor = _a.hoverColor, activeColor = _a.activeColor, extrastyles = _a.extrastyles, props = __rest(_a, ["hoverColor", "activeColor", "extrastyles"]);
+    return React.createElement("a", __assign({}, props));
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  font-size: ", ";\n  color: ", ";\n  font-weight: ", ";\n  font-family: ", ";\n  line-height: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  &:active {\n    text-decoration: underline;\n    color: ", ";\n  }\n\n  ", "\n"], ["\n  display: flex;\n  font-size: ", ";\n  color: ", ";\n  font-weight: ", ";\n  font-family: ", ";\n  line-height: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  &:active {\n    text-decoration: underline;\n    color: ", ";\n  }\n\n  ", "\n"])), function (_a) {
+    var size = _a.size;
+    return size;
+}, function (_a) {
+    var color = _a.color;
+    return color;
+}, function (_a) {
+    var weight = _a.weight;
+    return weight;
+}, function (_a) {
+    var fontFamily = _a.fontFamily;
+    return fontFamily;
+}, function (_a) {
+    var lineheight = _a.lineheight;
+    return lineheight;
+}, function (_a) {
+    var hoverColor = _a.hoverColor;
+    return hoverColor;
+}, ROYAL_BLUE, function (_a) {
+    var activeColor = _a.activeColor;
+    return activeColor;
+}, function (_a) {
+    var extrastyles = _a.extrastyles;
+    return extrastyles;
+});
+var templateObject_1;
+/* eslint-enable no-unused-vars */

package/dist/src/components/atoms/link/InternalLink.d.ts

@@ -0,0 +1,15 @@
+export default InternalLink;
+declare function InternalLink({ to, color, children, active, fontSize, lineheight, fontWeight, variant, margin, tabIndex, dataQa, extraStyles }: {
+    to?: string | undefined;
+    color: any;
+    children: any;
+    active: any;
+    fontSize: any;
+    lineheight: any;
+    fontWeight: any;
+    variant?: string | undefined;
+    margin: any;
+    tabIndex?: string | undefined;
+    dataQa: any;
+    extraStyles?: string | undefined;
+}): JSX.Element;

package/dist/src/components/atoms/link/InternalLink.js

@@ -0,0 +1,13 @@
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { fallbackValues } from "./Link.theme";
+import { createThemeValues } from "../../../util/themeUtils";
+import { StyledInternalLink } from "./InternalLink.styled";
+import { safeChildren } from "../../../util/general";
+var InternalLink = function (_a) {
+    var _b = _a.to, to = _b === void 0 ? "" : _b, color = _a.color, children = _a.children, active = _a.active, fontSize = _a.fontSize, lineheight = _a.lineheight, fontWeight = _a.fontWeight, _c = _a.variant, variant = _c === void 0 ? "primary" : _c, margin = _a.margin, _d = _a.tabIndex, tabIndex = _d === void 0 ? "0" : _d, dataQa = _a.dataQa, _e = _a.extraStyles, extraStyles = _e === void 0 ? "" : _e;
+    var themeContext = useContext(ThemeContext);
+    var themeValues = createThemeValues(themeContext, fallbackValues, "Link", variant);
+    return (React.createElement(StyledInternalLink, { to: to, color: color, lineheight: lineheight, active: active, fontWeight: fontWeight, fontSize: fontSize, fontFamily: themeValues.fontFamily, margin: margin, hoverColor: themeValues.hoverColor, activeColor: themeValues.activeColor, tabIndex: tabIndex, extrastyles: extraStyles, "data-qa": dataQa }, safeChildren(children, React.createElement("span", null))));
+};
+export default InternalLink;

package/dist/src/components/atoms/link/InternalLink.styled.d.ts

@@ -0,0 +1 @@
+export const StyledInternalLink: any;

package/dist/src/components/atoms/link/InternalLink.styled.js

@@ -0,0 +1,68 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+import { ROYAL_BLUE } from "../../../constants/colors";
+/*
+  The extracting of props and the disabling of the eslint rule is to stop React from complaining about
+  unrecognized DOM attributes.
+*/
+/* eslint-disable no-unused-vars */
+export var StyledInternalLink = styled(function (_a) {
+    var hoverColor = _a.hoverColor, activeColor = _a.activeColor, active = _a.active, color = _a.color, extrastyles = _a.extrastyles, props = __rest(_a, ["hoverColor", "activeColor", "active", "color", "extrastyles"]);
+    return (React.createElement(Link, __assign({}, props)));
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  color: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  margin: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  &:active {\n    text-decoration: underline;\n    color: ", ";\n  }\n\n  ", "\n"], ["\n  display: flex;\n  color: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  margin: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  &:active {\n    text-decoration: underline;\n    color: ", ";\n  }\n\n  ", "\n"])), function (_a) {
+    var color = _a.color, active = _a.active, activeColor = _a.activeColor;
+    return active === "true" ? activeColor : color;
+}, function (_a) {
+    var fontWeight = _a.fontWeight;
+    return fontWeight;
+}, function (_a) {
+    var lineheight = _a.lineheight;
+    return lineheight;
+}, function (_a) {
+    var fontSize = _a.fontSize;
+    return fontSize;
+}, function (_a) {
+    var fontFamily = _a.fontFamily;
+    return fontFamily;
+}, function (_a) {
+    var margin = _a.margin;
+    return margin;
+}, function (_a) {
+    var hoverColor = _a.hoverColor;
+    return hoverColor;
+}, ROYAL_BLUE, function (_a) {
+    var activeColor = _a.activeColor;
+    return activeColor;
+}, function (_a) {
+    var extrastyles = _a.extrastyles;
+    return extrastyles;
+});
+var templateObject_1;
+/* eslint-enable no-unused-vars */

package/dist/src/components/atoms/link/Link.stories.d.ts

@@ -0,0 +1,8 @@
+export function internalLink(): JSX.Element;
+export function externalLink(): JSX.Element;
+export default story;
+declare const story: {
+    title: any;
+    component: any;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};