maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cleanup & removed usages of sparingly used Text/ files (#2904)

This commit is contained in:
Alex van Andel 2022-05-30 10:36:23 +01:00 committed by GitHub
parent e270be1b87
commit a15fe78ddb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 13 additions and 414 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/web/components/team/screens/Team.tsx
View File

@ -11,7 +11,6 @@ import Button from "@calcom/ui/Button";
import { useLocale } from "@lib/hooks/useLocale";
import Avatar from "@components/ui/Avatar";
import Text from "@components/ui/Text";
type TeamType = TeamPageProps["team"];
type MembersType = TeamType["members"];
@ -56,10 +55,10 @@ const Team = ({ team }: TeamPageProps) => {
className="-mt-4 h-12 w-12"
/>
<section className="line-clamp-4 mt-2 w-full space-y-1">
<Text variant="title">{member.name}</Text>
<Text variant="subtitle" className="">
<p className="font-medium text-neutral-900 dark:text-white">{member.name}</p>
<p className="text-sm font-normal text-neutral-500 dark:text-white">
{member.bio || t("user_from_team", { user: member.name, team: team.name })}
</Text>
</p>
</section>
</div>
</div>

12
apps/web/components/ui/Text/Body/Body.tsx
View File

@ -1,12 +0,0 @@
import classnames from "classnames";
import React from "react";
import { TextProps } from "../Text";
const Body: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames("text-gray-900 dark:text-white", props?.className);
return <p className={classes}>{props?.text || props.children}</p>;
};
export default Body;

3
apps/web/components/ui/Text/Body/index.ts
View File

@ -1,3 +0,0 @@
import Body from "./Body";
export default Body;

12
apps/web/components/ui/Text/Caption/Caption.tsx
View File

@ -1,12 +0,0 @@
import classnames from "classnames";
import React from "react";
import { TextProps } from "../Text";
const Caption: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames("text-sm text-gray-500 dark:text-white leading-tight", props?.className);
return <p className={classes}>{props?.text || props.children}</p>;
};
export default Caption;

3
apps/web/components/ui/Text/Caption/index.ts
View File

@ -1,3 +0,0 @@
import Caption from "./Caption";
export default Caption;

12
apps/web/components/ui/Text/Caption2/Caption2.tsx
View File

@ -1,12 +0,0 @@
import classnames from "classnames";
import React from "react";
import { TextProps } from "../Text";
const Caption2: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames("text-xs italic text-gray-500 dark:text-white leading-tight", props?.className);
return <p className={classes}>{props?.text || props.children}</p>;
};
export default Caption2;

3
apps/web/components/ui/Text/Caption2/index.ts
View File

@ -1,3 +0,0 @@
import Caption2 from "./Caption2";
export default Caption2;

12
apps/web/components/ui/Text/Footnote/Footnote.tsx
View File

@ -1,12 +0,0 @@
import classnames from "classnames";
import React from "react";
import { TextProps } from "../Text";
const Footnote: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames("text-xs font-medium text-gray-500 dark:text-white", props?.className);
return <p className={classes}>{props?.text || props.children}</p>;
};
export default Footnote;

3
apps/web/components/ui/Text/Footnote/index.ts
View File

@ -1,3 +0,0 @@
import Footnote from "./Footnote";
export default Footnote;

12
apps/web/components/ui/Text/Headline/Headline.tsx
View File

@ -1,12 +0,0 @@
import classnames from "classnames";
import React from "react";
import { TextProps } from "../Text";
const Headline: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames("font-cal text-xl text-gray-900 dark:text-white", props?.className);
return <p className={classes}>{props?.text || props.children}</p>;
};
export default Headline;

3
apps/web/components/ui/Text/Headline/index.ts
View File

@ -1,3 +0,0 @@
import Headline from "./Headline";
export default Headline;

12
apps/web/components/ui/Text/Largetitle/Largetitle.tsx
View File

@ -1,12 +0,0 @@
import classnames from "classnames";
import React from "react";
import { TextProps } from "../Text";
const Largetitle: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames("font-cal tracking-wider text-3xl mb-2", props?.className);
return <p className={classes}>{props?.text || props.children}</p>;
};
export default Largetitle;

3
apps/web/components/ui/Text/Largetitle/index.ts
View File

@ -1,3 +0,0 @@
import Largetitle from "./Largetitle";
export default Largetitle;

15
apps/web/components/ui/Text/Overline/Overline.tsx
View File

@ -1,15 +0,0 @@
import classnames from "classnames";
import React from "react";
import { TextProps } from "../Text";
const Overline: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames(
"text-sm capitalize font-medium text-gray-900 dark:text-white",
props?.className
);
return <p className={classes}>{props?.text || props.children}</p>;
};
export default Overline;

3
apps/web/components/ui/Text/Overline/index.ts
View File

@ -1,3 +0,0 @@
import Overline from "./Overline";
export default Overline;

12
apps/web/components/ui/Text/Subheadline/Subheadline.tsx
View File

@ -1,12 +0,0 @@
import classnames from "classnames";
import React from "react";
import { TextProps } from "../Text";
const Subheadline: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames("text-xl text-gray-500 dark:text-white leading-relaxed", props?.className);
return <p className={classes}>{props?.text || props.children}</p>;
};
export default Subheadline;

3
apps/web/components/ui/Text/Subheadline/index.ts
View File

@ -1,3 +0,0 @@
import Subheadline from "./Subheadline";
export default Subheadline;

12
apps/web/components/ui/Text/Subtitle/Subtitle.tsx
View File

@ -1,12 +0,0 @@
import classnames from "classnames";
import React from "react";
import { TextProps } from "../Text";
const Subtitle: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames("text-sm font-normal text-neutral-500 dark:text-white", props?.className);
return <p className={classes}>{props?.text || props.children}</p>;
};
export default Subtitle;

3
apps/web/components/ui/Text/Subtitle/index.ts
View File

@ -1,3 +0,0 @@
import Subtitle from "./Subtitle";
export default Subtitle;

164
apps/web/components/ui/Text/Text.tsx
View File

@ -1,164 +0,0 @@
/**
* @deprecated create new a new set of components, waiting for designs
*/
import React from "react";
import Body from "./Body";
import Caption from "./Caption";
import Caption2 from "./Caption2";
import Footnote from "./Footnote";
import Headline from "./Headline";
import Largetitle from "./Largetitle";
import Overline from "./Overline";
import Subheadline from "./Subheadline";
import Subtitle from "./Subtitle";
import Title from "./Title";
import Title2 from "./Title2";
import Title3 from "./Title3";
type Props = {
variant?:
| "overline"
| "caption"
| "body"
| "caption2"
| "footnote"
| "headline"
| "largetitle"
| "subheadline"
| "subtitle"
| "title"
| "title2"
| "title3";
children: any;
text?: string;
tx?: string;
className?: string;
};
export type TextProps = {
children: any;
text?: string;
tx?: string;
className?: string;
};
/**
* static let largeTitle: Font
* A font with the large title text style.
*
* static let title: Font
* A font with the title text style.
*
* static let title2: Font
* Create a font for second level hierarchical headings.
*
* static let title3: Font
* Create a font for third level hierarchical headings.
*
* static let headline: Font
* A font with the headline text style.
*
* static let subheadline: Font
* A font with the subheadline text style.
*
* static let body: Font
* A font with the body text style.
*
* static let callout: Font
* A font with the callout text style.
*
* static let caption: Font
* A font with the caption text style.
*
* static let caption2: Font
* Create a font with the alternate caption text style.
*
* static let footnote: Font
* A font with the footnote text style.
*/
const Text: React.FunctionComponent<Props> = (props: Props) => {
switch (props?.variant) {
case "overline":
return (
<Overline text={props?.text} tx={props?.tx} className={props?.className}>
{props.children}
</Overline>
);
case "body":
return (
<Body text={props?.text} tx={props?.tx} className={props?.className}>
{props.children}
</Body>
);
case "caption":
return (
<Caption text={props?.text} tx={props?.tx} className={props?.className}>
{props.children}
</Caption>
);
case "caption2":
return (
<Caption2 text={props?.text} tx={props?.tx} className={props?.className}>
{props.children}
</Caption2>
);
case "footnote":
return (
<Footnote text={props?.text} tx={props?.tx} className={props?.className}>
{props.children}
</Footnote>
);
case "headline":
return (
<Headline text={props?.text} tx={props?.tx} className={props?.className}>
{props.children}
</Headline>
);
case "largetitle":
return (
<Largetitle text={props?.text} tx={props?.tx} className={props?.className}>
{props.children}
</Largetitle>
);
case "subheadline":
return (
<Subheadline text={props?.text} tx={props?.tx} className={props?.className}>
{props.children}
</Subheadline>
);
case "subtitle":
return (
<Subtitle text={props?.text} tx={props?.tx} className={props?.className}>
{props.children}
</Subtitle>
);
case "title":
return (
<Title text={props?.text} tx={props?.tx} className={props?.className}>
{props.children}
</Title>
);
case "title2":
return (
<Title2 text={props?.text} tx={props?.tx} className={props?.className}>
{props.children}
</Title2>
);
case "title3":
return (
<Title3 text={props?.text} tx={props?.tx} className={props?.className}>
{props.children}
</Title3>
);
default:
return (
<Body text={props?.text} tx={props?.tx} className={props?.className}>
{props.children}
</Body>
);
}
};
export default Text;

12
apps/web/components/ui/Text/Title/Title.tsx
View File

@ -1,12 +0,0 @@
import classnames from "classnames";
import React from "react";
import { TextProps } from "../Text";
const Title: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames("font-medium text-neutral-900 dark:text-white", props?.className);
return <p className={classes}>{props?.text || props.children}</p>;
};
export default Title;

3
apps/web/components/ui/Text/Title/index.ts
View File

@ -1,3 +0,0 @@
import Title from "./Title";
export default Title;

12
apps/web/components/ui/Text/Title2/Title2.tsx
View File

@ -1,12 +0,0 @@
import classnames from "classnames";
import React from "react";
import { TextProps } from "../Text";
const Title2: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames("text-base font-normal text-gray-900 dark:text-white", props?.className);
return <p className={classes}>{props?.text || props.children}</p>;
};
export default Title2;

3
apps/web/components/ui/Text/Title2/index.ts
View File

@ -1,3 +0,0 @@
import Title2 from "./Title2";
export default Title2;

15
apps/web/components/ui/Text/Title3/Title3.tsx
View File

@ -1,15 +0,0 @@
import classnames from "classnames";
import React from "react";
import { TextProps } from "../Text";
const Title3: React.FunctionComponent<TextProps> = (props: TextProps) => {
const classes = classnames(
"text-xs font-semibold leading-tight text-gray-900 dark:text-white",
props?.className
);
return <p className={classes}>{props?.text || props.children}</p>;
};
export default Title3;

3
apps/web/components/ui/Text/Title3/index.ts
View File

@ -1,3 +0,0 @@
import Title3 from "./Title3";
export default Title3;

40
apps/web/components/ui/Text/index.ts
View File

@ -1,40 +0,0 @@
import Body from "./Body";
import Caption from "./Caption";
import Caption2 from "./Caption2";
import Footnote from "./Footnote";
import Headline from "./Headline";
import Largetitle from "./Largetitle";
import Overline from "./Overline";
import Subheadline from "./Subheadline";
import Subtitle from "./Subtitle";
import Text from "./Text";
import Title from "./Title";
import Title2 from "./Title2";
import Title3 from "./Title3";
export { Text };
export default Text;
export { Title };
export { Title2 };
export { Title3 };
export { Largetitle };
export { Subtitle };
export { Headline };
export { Subheadline };
export { Caption };
export { Caption2 };
export { Footnote };
export { Overline };
export { Body };

21
apps/web/pages/getting-started.tsx
View File

@ -36,7 +36,6 @@ import { ClientSuspense } from "@components/ClientSuspense";
import Loader from "@components/Loader";
import Schedule from "@components/availability/Schedule";
import { CalendarListContainer } from "@components/integrations/CalendarListContainer";
import Text from "@components/ui/Text";
import TimezoneSelect from "@components/ui/form/TimezoneSelect";
import getEventTypes from "../lib/queries/event-types/get-event-types";
@ -398,10 +397,10 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
<label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
{t("timezone")}
</label>
<Text variant="caption">
<p className="text-sm leading-tight text-gray-500 dark:text-white">
{t("current_time")}:&nbsp;
<span className="text-black">{dayjs().tz(selectedTimeZone).format("LT")}</span>
</Text>
</p>
</section>
<TimezoneSelect
id="timeZone"
@ -529,9 +528,9 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
defaultValue={props.user.bio || undefined}
/>
<Text variant="caption" className="mt-2">
<p className="mt-2 text-sm leading-tight text-gray-500 dark:text-white">
{t("few_sentences_about_yourself")}
</Text>
</p>
</fieldset>
</section>
</form>
@ -582,17 +581,13 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
<article className="relative">
<section className="space-y-4 sm:mx-auto sm:w-full sm:max-w-lg">
<header>
<Text className="text-white" variant="largetitle">
{steps[currentStep].title}
</Text>
<Text className="text-white" variant="subtitle">
{steps[currentStep].description}
</Text>
<p className="font-cal mb-2 text-3xl tracking-wider text-white">{steps[currentStep].title}</p>
<p className="text-sm font-normal text-white">{steps[currentStep].description}</p>
</header>
<section className="space-y-2 pt-4">
<Text variant="footnote">
<p className="text-xs font-medium text-gray-500 dark:text-white">
Step {currentStep + 1} of {steps.length}
</Text>
</p>
{error && <Alert severity="error" message={error?.message} />}

9
apps/web/pages/team/[slug].tsx
View File

@ -23,7 +23,6 @@ import { HeadSeo } from "@components/seo/head-seo";
import Team from "@components/team/screens/Team";
import Avatar from "@components/ui/Avatar";
import AvatarGroup from "@components/ui/AvatarGroup";
import Text from "@components/ui/Text";
export type TeamPageProps = inferSSRProps<typeof getServerSideProps>;
function TeamPage({ team }: TeamPageProps) {
@ -93,12 +92,8 @@ function TeamPage({ team }: TeamPageProps) {
imageSrc={getPlaceholderAvatar(team.logo, team.name)}
className="mx-auto mb-4 h-20 w-20 rounded-full"
/>
<Text variant="largetitle" className="text-gray-900 dark:text-white">
{teamName}
</Text>
<Text variant="subtitle" className="mt-2">
{team.bio}
</Text>
<p className="font-cal mb-2 text-3xl tracking-wider text-gray-900 dark:text-white">{teamName}</p>
<p className="mt-2 text-sm font-normal text-neutral-500 dark:text-white">{team.bio}</p>
</div>
{(showMembers.isOn || !team.eventTypes.length) && <Team team={team} />}
{!showMembers.isOn && team.eventTypes.length > 0 && (