@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Tabs/TabScrollIndicators.js

@@ -0,0 +1,132 @@
+// @ts-nocheck
+import styled from "styled-components";
+import React from "react";
+import TabScrollIndicator from "./TabScrollIndicator";
+const TabScrollIndicatorContainer = styled.div(({ width, theme }) => ({
+    position: "absolute",
+    width,
+    height: theme.space.x5,
+}));
+class TabScrollIndicators extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            contentHiddenLeft: this.contentHiddenLeft(),
+            contentHiddenRight: this.contentHiddenRight(),
+        };
+        this.handleIndicatorClick = this.handleIndicatorClick.bind(this);
+        this.getScrollLeftValueByTabIndex = this.getScrollLeftValueByTabIndex.bind(this);
+        this.contentHiddenLeft = this.contentHiddenLeft.bind(this);
+        this.contentHiddenRight = this.contentHiddenRight.bind(this);
+        this.handleScroll = this.handleScroll.bind(this);
+        this.handleResize = this.handleResize.bind(this);
+    }
+    componentDidMount() {
+        this.conditionallyUpdateState();
+    }
+    getScrollLeftValueByTabIndex(index) {
+        const { tabRefs } = this.props;
+        let scrollLeftSum = 0;
+        for (let i = 0; i < index; i += 1) {
+            scrollLeftSum += tabRefs[i].offsetWidth;
+        }
+        return scrollLeftSum;
+    }
+    contentHiddenRight() {
+        const { tabContainerRef } = this.props;
+        if (!tabContainerRef.current) {
+            return false;
+        }
+        return (tabContainerRef.current.scrollLeft + tabContainerRef.current.offsetWidth < tabContainerRef.current.scrollWidth);
+    }
+    contentHiddenLeft() {
+        const { tabContainerRef } = this.props;
+        if (!tabContainerRef.current) {
+            return false;
+        }
+        return (tabContainerRef.current.scrollLeft !== 0 &&
+            tabContainerRef.current.offsetWidth < tabContainerRef.current.scrollWidth);
+    }
+    findLastVisibleTab() {
+        const { tabContainerRef, tabRefs, indicatorWidth } = this.props;
+        const rightMarker = tabContainerRef.current.scrollLeft + tabContainerRef.current.offsetWidth - indicatorWidth;
+        let scrollLeftSum = 0;
+        for (let i = 0; i < tabRefs.length; i += 1) {
+            scrollLeftSum += tabRefs[i].offsetWidth;
+            if (rightMarker <= scrollLeftSum) {
+                return i;
+            }
+        }
+        return null;
+    }
+    findFirstVisibleTab() {
+        const { tabContainerRef, tabRefs, indicatorWidth } = this.props;
+        const leftMarker = tabContainerRef.current.scrollLeft + indicatorWidth;
+        let scrollLeftSum = 0;
+        for (let i = 0; i < tabRefs.length; i += 1) {
+            scrollLeftSum += tabRefs[i].offsetWidth;
+            if (leftMarker <= scrollLeftSum) {
+                return i;
+            }
+        }
+        return null;
+    }
+    handleScroll() {
+        this.conditionallyUpdateState();
+    }
+    handleResize() {
+        this.setState({
+            contentHiddenLeft: this.contentHiddenLeft(),
+            contentHiddenRight: this.contentHiddenRight(),
+        });
+    }
+    conditionallyUpdateState() {
+        const { contentHiddenLeft, contentHiddenRight } = this.state;
+        const currentContentHiddenLeft = this.contentHiddenLeft();
+        const currentContentHiddenRight = this.contentHiddenRight();
+        if (currentContentHiddenLeft !== contentHiddenLeft) {
+            this.setState({ contentHiddenLeft: currentContentHiddenLeft });
+        }
+        if (currentContentHiddenRight !== contentHiddenRight) {
+            this.setState({ contentHiddenRight: currentContentHiddenRight });
+        }
+    }
+    handleIndicatorClick(side) {
+        const { tabRefs, tabContainerRef, indicatorWidth } = this.props;
+        if (side === "right") {
+            const lastVisibleTab = this.findLastVisibleTab();
+            const scrollLeft = this.getScrollLeftValueByTabIndex(lastVisibleTab) - indicatorWidth;
+            this.applyScrollLeft(scrollLeft);
+        }
+        else {
+            const firstVisibleTab = this.findFirstVisibleTab();
+            const scrollLeft = this.getScrollLeftValueByTabIndex(firstVisibleTab) +
+                indicatorWidth +
+                tabRefs[firstVisibleTab].offsetWidth -
+                tabContainerRef.current.offsetWidth;
+            this.applyScrollLeft(scrollLeft);
+        }
+    }
+    applyScrollLeft(scrollLeft) {
+        const { tabContainerRef } = this.props;
+        tabContainerRef.current.scroll({ left: scrollLeft, behavior: "smooth" });
+    }
+    render() {
+        const { tabContainerRef, indicatorWidth, children } = this.props;
+        const { contentHiddenLeft, contentHiddenRight } = this.state;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(TabScrollIndicatorContainer, { width: tabContainerRef.current ? tabContainerRef.current.offsetWidth : 0 },
+                contentHiddenLeft && (React.createElement(TabScrollIndicator, { width: indicatorWidth, side: "left", onClick: this.handleIndicatorClick })),
+                contentHiddenRight && (React.createElement(TabScrollIndicator, { width: indicatorWidth, side: "right", onClick: this.handleIndicatorClick }))),
+            children({
+                handleScroll: this.handleScroll,
+                handleResize: this.handleResize,
+            })));
+    }
+}
+TabScrollIndicators.defaultProps = {
+    tabRefs: undefined,
+    tabContainerRef: undefined,
+    indicatorWidth: 40,
+};
+export default TabScrollIndicators;

package/dist/src/Tabs/Tabs.d.ts

@@ -1,27 +1,27 @@
-import React from "react";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-export type TabsProps = React.PropsWithChildren<{
-    className?: string;
-    selectedIndex?: number;
-    variant?: ComponentVariant;
-    defaultSelectedIndex?: number;
-    renderTabContentOnlyWhenSelected?: boolean;
-    fitted?: boolean;
-    onTabClick?: (...args: any[]) => any;
-}>;
-export type TabsState = {
-    selectedIndex: any;
-};
-declare class Tabs extends React.Component<TabsProps, TabsState> {
-    static contextType: React.Context<{
-        variant: ComponentVariant;
-        children?: React.ReactNode;
-    }>;
-    constructor(props: any);
-    getSelectedIndex(): any;
-    getTabs(setFocusToTab: any, focusedIndex: any, handleArrowNavigation: any): React.DetailedReactHTMLElement<any, HTMLElement>[];
-    getTabContent(): React.JSX.Element[];
-    handleTabClick(index: any): void;
-    render(): React.JSX.Element;
-}
-export default Tabs;
+import React from "react";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+export type TabsProps = React.PropsWithChildren<{
+    className?: string;
+    selectedIndex?: number;
+    variant?: ComponentVariant;
+    defaultSelectedIndex?: number;
+    renderTabContentOnlyWhenSelected?: boolean;
+    fitted?: boolean;
+    onTabClick?: (...args: any[]) => any;
+}>;
+export type TabsState = {
+    selectedIndex: any;
+};
+declare class Tabs extends React.Component<TabsProps, TabsState> {
+    static contextType: React.Context<{
+        variant: ComponentVariant;
+        children?: React.ReactNode;
+    }>;
+    constructor(props: any);
+    getSelectedIndex(): any;
+    getTabs(setFocusToTab: any, focusedIndex: any, handleArrowNavigation: any): React.DetailedReactHTMLElement<any, HTMLElement>[];
+    getTabContent(): React.JSX.Element[];
+    handleTabClick(index: any): void;
+    render(): React.JSX.Element;
+}
+export default Tabs;

package/dist/src/Tabs/Tabs.js

@@ -0,0 +1,110 @@
+// @ts-nocheck
+import React from "react";
+import propTypes from "@styled-system/prop-types";
+import ReactResizeDetector from "react-resize-detector";
+import { getSubset } from "../utils/subset";
+import FocusManager from "../utils/ts/FocusManager";
+import { Box } from "../Box";
+import { ComponentVariantContext } from "../NDSProvider/ComponentVariantContext";
+import TabContainer from "./TabContainer";
+import TabScrollIndicators from "./TabScrollIndicators";
+class Tabs extends React.Component {
+    constructor(props) {
+        super(props);
+        const { defaultSelectedIndex } = this.props;
+        this.state = {
+            selectedIndex: defaultSelectedIndex === null ? null : defaultSelectedIndex,
+        };
+        this.tabContent = [];
+        this.tabContainerRef = React.createRef();
+        this.tabRefs = [];
+        this.handleTabClick = this.handleTabClick.bind(this);
+        this.getTabs = this.getTabs.bind(this);
+    }
+    getSelectedIndex() {
+        const { selectedIndex: controlledSelectedIndex } = this.props;
+        const { selectedIndex: uncontrolledSelectedIndex } = this.state;
+        return controlledSelectedIndex === undefined ? uncontrolledSelectedIndex : controlledSelectedIndex;
+    }
+    getTabs(setFocusToTab, focusedIndex, handleArrowNavigation) {
+        const { fitted, children, onTabClick, variant } = this.props;
+        const componentVariant = variant !== null && variant !== void 0 ? variant : this.context.size;
+        const selectedIndex = this.getSelectedIndex();
+        const tabs = React.Children.toArray(children);
+        return tabs
+            .filter((tab) => Boolean(tab))
+            .map((tab, index) => {
+            return React.cloneElement(tab, {
+                onClick: (e) => {
+                    var _a, _b;
+                    setFocusToTab(index);
+                    if ((_a = tab === null || tab === void 0 ? void 0 : tab.props) === null || _a === void 0 ? void 0 : _a.onClick) {
+                        (_b = tab === null || tab === void 0 ? void 0 : tab.props) === null || _b === void 0 ? void 0 : _b.onClick(e);
+                    }
+                    if (onTabClick) {
+                        onTabClick(e, index);
+                    }
+                    else {
+                        this.handleTabClick(index);
+                    }
+                },
+                onFocus: (e) => {
+                    e.stopPropagation();
+                },
+                onKeyDown: handleArrowNavigation,
+                index,
+                variant: componentVariant,
+                tabIndex: index === focusedIndex ? 0 : -1,
+                selected: index === selectedIndex,
+                "aria-selected": index === selectedIndex,
+                fullWidth: fitted,
+                ref: (ref) => {
+                    this.tabRefs[index] = ref;
+                },
+            });
+        });
+    }
+    getTabContent() {
+        const { children, renderTabContentOnlyWhenSelected } = this.props;
+        const selectedIndex = this.getSelectedIndex();
+        const tabs = React.Children.toArray(children);
+        const tabContent = tabs
+            .filter((tab) => Boolean(tab))
+            .map((tab, index) => {
+            var _a;
+            const selected = index === selectedIndex;
+            if (renderTabContentOnlyWhenSelected && !selected) {
+                return null;
+            }
+            else {
+                return (React.createElement("div", { "aria-hidden": !selected, hidden: !selected, selected: selected, key: tab.key || tab.label }, (_a = tab === null || tab === void 0 ? void 0 : tab.props) === null || _a === void 0 ? void 0 : _a.children));
+            }
+        });
+        return tabContent;
+    }
+    handleTabClick(index) {
+        this.setState({
+            selectedIndex: index,
+        });
+    }
+    render() {
+        const { className } = this.props;
+        const spaceProps = getSubset(this.props, propTypes.space);
+        return (React.createElement(Box, { position: "relative" },
+            React.createElement(FocusManager, { refs: this.tabRefs, defaultFocusedIndex: this.getSelectedIndex() }, ({ focusedIndex, setFocusedIndex, handleArrowNavigation }) => (React.createElement(TabScrollIndicators, { tabRefs: this.tabRefs, tabContainerRef: this.tabContainerRef }, ({ handleScroll, handleResize }) => (React.createElement(TabContainer, Object.assign({ className: className, role: "tablist", onScroll: handleScroll, ref: this.tabContainerRef }, spaceProps),
+                React.createElement(ReactResizeDetector, { handleWidth: true, onResize: handleResize }),
+                this.getTabs(setFocusedIndex, focusedIndex, handleArrowNavigation)))))),
+            this.getTabContent()));
+    }
+}
+Tabs.contextType = ComponentVariantContext;
+Tabs.defaultProps = {
+    children: null,
+    className: undefined,
+    selectedIndex: undefined,
+    defaultSelectedIndex: null,
+    renderTabContentOnlyWhenSelected: false,
+    fitted: false,
+    onTabClick: undefined,
+};
+export default Tabs;

package/dist/src/Tabs/Tabs.story.d.ts

@@ -1,55 +1,55 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const _Tabs: () => React.JSX.Element;
-export declare const WithADefaultSelectedIndex: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithOtherInteractiveElements: () => React.JSX.Element;
-export declare const SetToFitted: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAllTabStates: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithScrollingTabs: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-        parameters: {
-            viewport: {
-                defaultViewport: string;
-            };
-        };
-    };
-};
-export declare const Controlled: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithInputs: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithContentLoadedOnSelection: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithConditionallyRenderedTabs: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _Tabs: () => React.JSX.Element;
+export declare const WithADefaultSelectedIndex: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithOtherInteractiveElements: () => React.JSX.Element;
+export declare const SetToFitted: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithAllTabStates: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithScrollingTabs: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+        parameters: {
+            viewport: {
+                defaultViewport: string;
+            };
+        };
+    };
+};
+export declare const Controlled: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithInputs: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithContentLoadedOnSelection: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithConditionallyRenderedTabs: () => React.JSX.Element;

package/dist/src/Tabs/Tabs.story.js

@@ -0,0 +1,109 @@
+import React from "react";
+import { Button } from "../Button";
+import { Flex } from "../Flex";
+import { Tab, Tabs } from ".";
+class ControlledTabs extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            selectedIndex: null,
+        };
+        this.setSelectedTab = this.setSelectedTab.bind(this);
+    }
+    setSelectedTab(e, index) {
+        this.setState({ selectedIndex: index });
+    }
+    render() {
+        const { selectedIndex } = this.state;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Tabs, { onTabClick: this.setSelectedTab, selectedIndex: selectedIndex },
+                React.createElement(Tab, { className: "Tab1", label: "Tab 1" }, "Uncontrolled Content: Tab 1"),
+                React.createElement(Tab, { className: "Tab2", label: "Tab 2" }, "Uncontrolled Content: Tab 2"),
+                React.createElement(Tab, { className: "Tab3", label: "Tab 3" }, "Uncontrolled Content: Tab 3"),
+                React.createElement(Tab, { className: "Tab4", label: "Tab 4" }, "Uncontrolled Content: Tab 4")),
+            React.createElement("div", { className: "ControlledTabContent" },
+                "Controlled Content: Tab ",
+                selectedIndex + 1)));
+    }
+}
+export default {
+    title: "Components/Tabs",
+};
+export const _Tabs = () => (React.createElement(Tabs, null,
+    React.createElement(Tab, { className: "Tab1", label: "Tab 1" }, "Tab 1 Content"),
+    React.createElement(Tab, { className: "Tab2", label: "Tab 2" }, "Tab 2 Content"),
+    React.createElement(Tab, { className: "Tab3", label: "Tab 3" }, "Tab 3 Content"),
+    React.createElement(Tab, { className: "Tab4", label: "Tab 4" }, "Tab 4 Content")));
+export const WithADefaultSelectedIndex = () => (React.createElement(Tabs, { defaultSelectedIndex: 1 },
+    React.createElement(Tab, { label: "Tab 1" }, "Tab 1 Content"),
+    React.createElement(Tab, { label: "Tab 2" }, "Tab 2 Content"),
+    React.createElement(Tab, { label: "Tab 3" }, "Tab 3 Content"),
+    React.createElement(Tab, { label: "Tab 4" }, "Tab 4 Content")));
+WithADefaultSelectedIndex.story = {
+    name: "with a defaultSelectedIndex",
+};
+export const WithOtherInteractiveElements = () => (React.createElement(Flex, { gap: "x2", alignItems: "flex-start", flexDirection: "column" },
+    React.createElement(Button, null, "Click me"),
+    React.createElement(Tabs, { defaultSelectedIndex: 1 },
+        React.createElement(Tab, { label: "Tab 1" }, "Tab 1 Content"),
+        React.createElement(Tab, { label: "Tab 2" }, "Tab 2 Content"),
+        React.createElement(Tab, { label: "Tab 3" }, "Tab 3 Content"),
+        React.createElement(Tab, { label: "Tab 4" }, "Tab 4 Content"))));
+export const SetToFitted = () => (React.createElement(Tabs, { fitted: true },
+    React.createElement(Tab, { label: "Tab 1" }, "Tab 1 Content"),
+    React.createElement(Tab, { label: "Tab 2" }, "Tab 2 Content"),
+    React.createElement(Tab, { label: "Tab 3" }, "Tab 3 Content"),
+    React.createElement(Tab, { label: "Tab 4" }, "Tab 4 Content")));
+SetToFitted.story = {
+    name: "set to fitted",
+};
+export const WithAllTabStates = () => (React.createElement("div", null,
+    React.createElement(Tab, { label: "Tab" }),
+    React.createElement(Tab, { label: "Tab", selected: true }),
+    React.createElement(Tab, { label: "Tab", disabled: true }),
+    React.createElement(Tab, { label: "Tab", disabled: true, selected: true })));
+WithAllTabStates.story = {
+    name: "with all tab states",
+};
+export const WithScrollingTabs = () => (React.createElement(Tabs, { className: "tab-container" },
+    React.createElement(Tab, { label: "Tab 1" }, "Tab 1 Content"),
+    React.createElement(Tab, { label: "Tab 2" }, "Tab 2 Content"),
+    React.createElement(Tab, { label: "Tab 3" }, "Tab 3 Content"),
+    React.createElement(Tab, { label: "Tab 4" }, "Tab 4 Content"),
+    React.createElement(Tab, { label: "Tab 5" }, "Tab 5 Content"),
+    React.createElement(Tab, { label: "Tab 6" }, "Tab 6 Content"),
+    React.createElement(Tab, { label: "Tab 7" }, "Tab 7 Content"),
+    React.createElement(Tab, { label: "Tab 8" }, "Tab 8 Content"),
+    React.createElement(Tab, { label: "Tab 9" }, "Tab 9 Content"),
+    React.createElement(Tab, { label: "Tab 10" }, "Tab 10 Content"),
+    React.createElement(Tab, { label: "Tab 11" }, "Tab 11 Content"),
+    React.createElement(Tab, { label: "Tab 12" }, "Tab 12 Content")));
+WithScrollingTabs.story = {
+    name: "with scrolling tabs",
+    parameters: { viewport: { defaultViewport: "extraSmall" } },
+};
+export const Controlled = () => React.createElement(ControlledTabs, null);
+Controlled.story = {
+    name: "controlled",
+};
+export const WithInputs = () => (React.createElement(Tabs, null,
+    React.createElement(Tab, { label: "Tab 1", className: "Tab1" },
+        React.createElement("input", { className: "Input1" })),
+    React.createElement(Tab, { label: "Tab 2", className: "Tab2" },
+        React.createElement("input", { className: "Input2" }))));
+WithInputs.story = {
+    name: "with inputs",
+};
+export const WithContentLoadedOnSelection = () => (React.createElement(Tabs, { renderTabContentOnlyWhenSelected: true },
+    React.createElement(Tab, { label: "Tab 1", className: "Tab1" },
+        React.createElement("input", { className: "Input1" })),
+    React.createElement(Tab, { label: "Tab 2", className: "Tab2" },
+        React.createElement("input", { className: "Input2" }))));
+WithContentLoadedOnSelection.story = {
+    name: "with content loaded on selection",
+};
+export const WithConditionallyRenderedTabs = () => (React.createElement(Tabs, null,
+    false && React.createElement(Tab, { label: "Hidden 2" }, "Hidden tab 1"),
+    true && React.createElement(Tab, { label: "Shown 1" }, "Shown tab 1"),
+    false && React.createElement(Tab, { label: "Hidden 2" }, "Hidden tab 2"),
+    true && React.createElement(Tab, { label: "Shown 2" }, "Shown tab 2")));

package/dist/src/Tabs/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Tab } from "./Tab";
-export { default as Tabs } from "./Tabs";
-export { default as TabScrollIndicator } from "./TabScrollIndicator";
-export { default as TabScrollIndicators } from "./TabScrollIndicators";
+export { default as Tab } from "./Tab";
+export { default as Tabs } from "./Tabs";
+export { default as TabScrollIndicator } from "./TabScrollIndicator";
+export { default as TabScrollIndicators } from "./TabScrollIndicators";

package/dist/src/Tabs/index.js

@@ -0,0 +1,4 @@
+export { default as Tab } from "./Tab";
+export { default as Tabs } from "./Tabs";
+export { default as TabScrollIndicator } from "./TabScrollIndicator";
+export { default as TabScrollIndicators } from "./TabScrollIndicators";

package/dist/src/Textarea/StyledTextarea.d.ts

@@ -1,15 +1,15 @@
-import React from "react";
-import { SpaceProps } from "styled-system";
-import { DefaultNDSThemeType } from "../theme";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-export type StyledTextareaProps = React.ComponentPropsWithRef<"textarea"> & SpaceProps & {
-    variant?: ComponentVariant;
-    theme?: DefaultNDSThemeType;
-    errorMessage?: string;
-    errorList?: string[];
-    error?: boolean;
-    rows?: number;
-    isResizeable?: boolean;
-};
-declare const StyledTextarea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, StyledTextareaProps>> & string;
-export default StyledTextarea;
+import React from "react";
+import { SpaceProps } from "styled-system";
+import { DefaultNDSThemeType } from "../theme";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+export type StyledTextareaProps = React.ComponentPropsWithRef<"textarea"> & SpaceProps & {
+    variant?: ComponentVariant;
+    theme?: DefaultNDSThemeType;
+    errorMessage?: string;
+    errorList?: string[];
+    error?: boolean;
+    rows?: number;
+    isResizeable?: boolean;
+};
+declare const StyledTextarea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, StyledTextareaProps>> & string;
+export default StyledTextarea;

package/dist/src/Textarea/StyledTextarea.js

@@ -0,0 +1,59 @@
+import styled from "styled-components";
+import { transparentize } from "polished";
+import { variant } from "styled-system";
+import { space } from "styled-system";
+import { subPx } from "../utils";
+const textareaStyles = (theme) => ({
+    disabled: {
+        color: transparentize(0.33, theme.colors.black),
+        borderColor: theme.colors.lightGrey,
+        backgroundColor: theme.colors.whiteGrey,
+    },
+    error: {
+        color: theme.colors.red,
+        borderColor: theme.colors.red,
+    },
+    default: {
+        color: theme.colors.black,
+        borderColor: theme.colors.grey,
+    },
+});
+const getTextareaStyle = (props) => {
+    const textareaStyleMap = textareaStyles(props.theme);
+    if (props.disabled) {
+        return textareaStyleMap.disabled;
+    }
+    if (props.error) {
+        return textareaStyleMap.error;
+    }
+    return textareaStyleMap.default;
+};
+const StyledTextarea = styled.textarea(space, ({ theme, isResizeable }) => ({
+    display: "block",
+    width: "100%",
+    border: "1px solid",
+    borderRadius: theme.radii.medium,
+    fontSize: theme.fontSizes.base,
+    lineHeight: theme.lineHeights.base,
+    minHeight: theme.space.x5,
+    minWidth: "20em",
+    resize: isResizeable ? null : "none",
+    "&:focus": {
+        outline: "none",
+        color: theme.colors.black,
+        borderColor: theme.colors.blue,
+        boxShadow: theme.shadows.focus,
+    },
+    "::placeholder": {
+        color: transparentize(0.4, theme.colors.black),
+    },
+    padding: `${subPx(theme.space.x1)}`,
+}), variant({
+    variants: {
+        touch: {
+            fontSize: "md",
+            lineHeight: "base",
+        },
+    },
+}), (props) => getTextareaStyle(props));
+export default StyledTextarea;

package/dist/src/Textarea/Textarea.d.ts

@@ -1,18 +1,18 @@
-import React from "react";
-import { StyledTextareaProps } from "./StyledTextarea";
-type TextareaProps = StyledTextareaProps & {
-    className?: string;
-    id?: string;
-    disabled?: boolean;
-    errorMessage?: string;
-    error?: boolean;
-    errorList?: string[];
-    required?: boolean;
-    labelText?: string;
-    helpText?: React.ReactNode;
-    requirementText?: string;
-    rows?: number;
-    isResizeable?: boolean;
-};
-declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
-export default Textarea;
+import React from "react";
+import { StyledTextareaProps } from "./StyledTextarea";
+type TextareaProps = StyledTextareaProps & {
+    className?: string;
+    id?: string;
+    disabled?: boolean;
+    errorMessage?: string;
+    error?: boolean;
+    errorList?: string[];
+    required?: boolean;
+    labelText?: string;
+    helpText?: React.ReactNode;
+    requirementText?: string;
+    rows?: number;
+    isResizeable?: boolean;
+};
+declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+export default Textarea;