From c09380644b5a81b0c58c19c11f8fca4eec86f8ad Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Thu, 11 Aug 2022 17:59:00 +0200 Subject: [PATCH] typescript `src/tabs`, `src/typography` (#491) * first iteration * tabs generic - remove as from typography * typography using React.component function * comma mistake * ... * review + add back `as` option for typography. * linter * quick fix * us location descriptor --- .../{Tabs.stories.jsx => Tabs.stories.tsx} | 3 +- src/tabs/{Tabs.jsx => Tabs.tsx} | 38 ++-- ...phy.stories.jsx => Typography.stories.tsx} | 3 +- .../{Typography.jsx => Typography.tsx} | 165 ++++++++++-------- 4 files changed, 122 insertions(+), 87 deletions(-) rename src/tabs/{Tabs.stories.jsx => Tabs.stories.tsx} (97%) rename src/tabs/{Tabs.jsx => Tabs.tsx} (67%) rename src/typography/{Typography.stories.jsx => Typography.stories.tsx} (96%) rename src/typography/{Typography.jsx => Typography.tsx} (57%) diff --git a/src/tabs/Tabs.stories.jsx b/src/tabs/Tabs.stories.tsx similarity index 97% rename from src/tabs/Tabs.stories.jsx rename to src/tabs/Tabs.stories.tsx index 80f3b481..1ee94281 100644 --- a/src/tabs/Tabs.stories.jsx +++ b/src/tabs/Tabs.stories.tsx @@ -15,6 +15,7 @@ limitations under the License. */ import React from "react"; + import { TabContainer, TabItem } from "./Tabs"; import { ReactComponent as AudioIcon } from "../icons/Audio.svg"; import { ReactComponent as VideoIcon } from "../icons/Video.svg"; @@ -29,7 +30,7 @@ export default { }, }; -export const Tabs = () => ( +export const Tabs: React.FC<{}> = () => ( extends TabListProps { + className?: string; +} + +export function TabContainer( + props: TabContainerProps +): JSX.Element { + const state = useTabListState(props); + const ref = useRef(); const { tabListProps } = useTabList(props, state, ref); return (
    {[...state.collection].map((item) => ( - + ))}
@@ -37,9 +46,14 @@ export function TabContainer(props) { ); } -function Tab({ item, state }) { +interface TabProps { + item: Node; + state: TabListState; +} + +function Tab({ item, state }: TabProps): JSX.Element { const { key, rendered } = item; - const ref = useRef(); + const ref = useRef(); const { tabProps } = useTab({ key }, state, ref); return ( @@ -56,8 +70,12 @@ function Tab({ item, state }) { ); } -function TabPanel({ state, ...props }) { - const ref = useRef(); +interface TabPanelProps extends AriaTabPanelProps { + state: TabListState; +} + +function TabPanel({ state, ...props }: TabPanelProps): JSX.Element { + const ref = useRef(); const { tabPanelProps } = useTabPanel(props, state, ref); return (
diff --git a/src/typography/Typography.stories.jsx b/src/typography/Typography.stories.tsx similarity index 96% rename from src/typography/Typography.stories.jsx rename to src/typography/Typography.stories.tsx index 05ab7e3c..a400166c 100644 --- a/src/typography/Typography.stories.jsx +++ b/src/typography/Typography.stories.tsx @@ -15,6 +15,7 @@ limitations under the License. */ import React from "react"; + import { Headline, Title, Subtitle, Body, Caption, Micro } from "./Typography"; export default { @@ -24,7 +25,7 @@ export default { }, }; -export const Typography = () => ( +export const Typography: React.FC<{}> = () => ( <> Headline Semi Bold Title diff --git a/src/typography/Typography.jsx b/src/typography/Typography.tsx similarity index 57% rename from src/typography/Typography.jsx rename to src/typography/Typography.tsx index 5ec066a9..4d8ac288 100644 --- a/src/typography/Typography.jsx +++ b/src/typography/Typography.tsx @@ -14,12 +14,22 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { forwardRef } from "react"; +import { createElement, forwardRef, ReactNode } from "react"; import classNames from "classnames"; import { Link as RouterLink } from "react-router-dom"; +import * as H from "history"; + import styles from "./Typography.module.css"; -export const Headline = forwardRef( +interface TypographyProps { + children: ReactNode; + fontWeight?: string; + className?: string; + overflowEllipsis?: boolean; + as?: string; +} + +export const Headline = forwardRef( ( { as: Component = "h1", @@ -31,23 +41,23 @@ export const Headline = forwardRef( }, ref ) => { - return ( - - {children} - + ), + ref, + }, + children ); } ); -export const Title = forwardRef( +export const Title = forwardRef( ( { as: Component = "h2", @@ -59,23 +69,23 @@ export const Title = forwardRef( }, ref ) => { - return ( - - {children} - + ), + ref, + }, + children ); } ); -export const Subtitle = forwardRef( +export const Subtitle = forwardRef( ( { as: Component = "h3", @@ -87,23 +97,23 @@ export const Subtitle = forwardRef( }, ref ) => { - return ( - - {children} - + ), + ref, + }, + children ); } ); -export const Body = forwardRef( +export const Body = forwardRef( ( { as: Component = "p", @@ -115,23 +125,23 @@ export const Body = forwardRef( }, ref ) => { - return ( - - {children} - + ), + ref, + }, + children ); } ); -export const Caption = forwardRef( +export const Caption = forwardRef( ( { as: Component = "p", @@ -143,24 +153,24 @@ export const Caption = forwardRef( }, ref ) => { - return ( - - {children} - + ), + ref, + }, + children ); } ); -export const Micro = forwardRef( +export const Micro = forwardRef( ( { as: Component = "p", @@ -172,24 +182,29 @@ export const Micro = forwardRef( }, ref ) => { - return ( - - {children} - + ), + ref, + }, + children ); } ); -export const Link = forwardRef( +interface LinkProps extends TypographyProps { + to?: H.LocationDescriptor; + color?: string; + href?: string; +} +export const Link = forwardRef( ( { as, @@ -204,8 +219,8 @@ export const Link = forwardRef( }, ref ) => { - const Component = as || (to ? RouterLink : "a"); - let externalLinkProps; + const Component: string | RouterLink = as || (to ? RouterLink : "a"); + let externalLinkProps: { href: string; target: string; rel: string }; if (href) { externalLinkProps = { @@ -215,21 +230,21 @@ export const Link = forwardRef( }; } - return ( - - {children} - + ), + ref: ref, + }, + children ); } );