Skip to content

Commit

Permalink
Merge branch 'main' into feat/discussion-bot-knowledge-expansion
Browse files Browse the repository at this point in the history
  • Loading branch information
@SiTaggart
SiTaggart authored Feb 16, 2024
2 parents 474df83 + 539975b commit 16e36a3
Show file tree
Hide file tree
Showing 27 changed files with 1,520 additions and 123 deletions.
103 changes: 60 additions & 43 deletions packages/paste-website/scripts/fetch-data.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,26 +31,38 @@ const getCategory = (pkgPath) => {

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
const getAllPatterns = async () => {
const patterns = await systemTable
.select({
filterByFormula: 'AND({Component Category} = "pattern", Documentation, status, status != "in development")',
sort: [{ field: "Feature" }],
fields: ["Feature", "status"],
})
.all();
return patterns.map(({ fields }) => fields);
try {
const patterns = await systemTable
.select({
filterByFormula: 'AND({Component Category} = "pattern", Documentation, status, status != "in development")',
sort: [{ field: "Feature" }],
fields: ["Feature", "status"],
})
.all();

return patterns.map(({ fields }) => fields);
} catch (error) {
// eslint-disable-next-line no-console
console.log("getAllPatterns fetch error:", error);
}
};

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
const getAllPageTemplates = async () => {
const patterns = await systemTable
.select({
filterByFormula: 'AND({Component Category} = "page_template", Documentation, status, status != "in development")',
sort: [{ field: "Feature" }],
fields: ["Feature", "status"],
})
.all();
return patterns.map(({ fields }) => fields);
try {
const patterns = await systemTable
.select({
filterByFormula:
'AND({Component Category} = "page_template", Documentation, status, status != "in development")',
sort: [{ field: "Feature" }],
fields: ["Feature", "status"],
})
.all();
return patterns.map(({ fields }) => fields);
} catch (error) {
// eslint-disable-next-line no-console
console.log("getAllPageTemplates fetch error:", error);
}
};

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
Expand Down Expand Up @@ -98,33 +110,38 @@ const getAllPackages = async () => {

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
export const getAllFeatures = async () => {
const features = await systemTable
.select({
filterByFormula: "status",
sort: [{ field: "Feature" }],
fields: [
"Component Category",
"Feature",
"Documentation",
"Figma",
"Design committee review",
"Engineer committee review",
"Code",
"status",
"Product suitability",
],
})
.all();
const items = features.map(({ fields }) => fields);

await fs.mkdir(dataPath, { recursive: true }, (err) => {
if (err) {
// eslint-disable-next-line no-console
console.log(err);
}
});

await fs.writeFile(path.join(dataPath, "feature-data.json"), JSON.stringify(items, null, 2), "utf8");
try {
const features = await systemTable
.select({
filterByFormula: "status",
sort: [{ field: "Feature" }],
fields: [
"Component Category",
"Feature",
"Documentation",
"Figma",
"Design committee review",
"Engineer committee review",
"Code",
"status",
"Product suitability",
],
})
.all();
const items = features.map(({ fields }) => fields);

await fs.mkdir(dataPath, { recursive: true }, (err) => {
if (err) {
// eslint-disable-next-line no-console
console.log(err);
}
});

await fs.writeFile(path.join(dataPath, "feature-data.json"), JSON.stringify(items, null, 2), "utf8");
} catch (error) {
// eslint-disable-next-line no-console
console.log("getAllFeatures fetch error:", error);
}
};

getAllPackages();
Expand Down
46 changes: 0 additions & 46 deletions packages/paste-website/src/components/customization-landing-page/WhyPaste.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,56 +7,12 @@ import Image from "next/image";
import { DoodleLoopArrowLarge } from "../../assets/illustrations/DoodleLoopArrowLarge";
import WhyPasteMobile from "../../assets/images/customization/why-paste-mobile.png";
import WhyPasteImg from "../../assets/images/customization/why-paste.png";
import { useDarkModeContext } from "../../context/DarkModeContext";
import { useSlantedSkew } from "../SlantedBackgroundGradient";
import { A11yIcon } from "../icons/A11yIcon";
import { CustomizableIcon } from "../icons/CustomizableIcon";
import { ThemableIcon } from "../icons/ThemableIcon";
import { LandingPageSection, LandingPageSectionContent } from "./LandingPageLayoutUtils";
import { ReasonBlock } from "./ReasonBlock";

const WhyPasteTopAngle = (): JSX.Element => {
const [skewOffset] = useSlantedSkew();
const { theme } = useDarkModeContext();

return (
<Box
// @ts-expect-error combat semi opaque dark mode token value
backgroundColor={theme === "dark" ? "#2a3342" : "colorBackgroundPrimaryWeakest"}
borderRadius="borderRadius20"
height="95%"
left={0}
position="absolute"
right={0}
top={skewOffset}
transform="skewY(10deg)"
transformOrigin="100% 0"
zIndex="zIndex0"
/>
);
};

const WhyPasteBottomAngle = (): JSX.Element => {
const [skewOffset] = useSlantedSkew(-0.35);
const { theme } = useDarkModeContext();

return (
<Box
// @ts-expect-error combat semi opaque dark mode token value
backgroundColor={theme === "dark" ? "#2a3342" : "colorBackgroundPrimaryWeakest"}
borderRadius="borderRadius20"
bottom={skewOffset}
height="100%"
left={0}
position="absolute"
right={0}
transform="skewY(10deg)"
transformOrigin="100% 0"
zIndex="zIndex0"
/>
);
};

export const WhyPaste = (): JSX.Element => {
return (
<LandingPageSection
Expand All @@ -66,8 +22,6 @@ export const WhyPaste = (): JSX.Element => {
maxWidth="96%"
marginX="auto"
>
<WhyPasteTopAngle />
<WhyPasteBottomAngle />
<Box position="relative" maxWidth="1400px" marginX="auto">
<LandingPageSectionContent variant="narrow" zIndex="zIndex10">
<Box maxWidth="size60" marginBottom="space130">
Expand Down
32 changes: 19 additions & 13 deletions packages/paste-website/src/components/homepage/Accessibility.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@twilio-paste/tabs";
import { useUID } from "@twilio-paste/uid-library";
import * as React from "react";

import { SITE_CONTENT_MAX_WIDTH } from "../../constants";
import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants";
import { BouncyAnchor } from "./BouncyAnchor";
import { SectionSeparator } from "./SectionSeparator";

Expand All @@ -32,7 +32,13 @@ const Accessibility: React.FC = (): React.ReactElement => {

return (
<Box display="flex" justifyContent="center" marginY="space200">
<Box element="ACCESSIBILITY" display="flex" flexDirection="column" width="100%" maxWidth={SITE_CONTENT_MAX_WIDTH}>
<Box
element="ACCESSIBILITY"
display="flex"
flexDirection="column"
width="100%"
maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}
>
<SectionSeparator>Accessibility</SectionSeparator>
<Box
display="flex"
Expand All @@ -48,18 +54,18 @@ const Accessibility: React.FC = (): React.ReactElement => {
<Paragraph>
Accessibility is more than just color contrast. We believe in designing for each user, not just “all
users”. We build with these considerations in mind:
<UnorderedList>
<ListItem>
Screen magnification, voice dictation, color blindness, and those who require help with fine motor
control.
</ListItem>
<ListItem>Semantic HTML to better communicate with assistive technologies.</ListItem>
<ListItem>UI controls that are designed to be instantly recognizable and easy to see.</ListItem>
<ListItem>
Keyboard navigation and focus management to allow task completion through a variety of input devices.
</ListItem>
</UnorderedList>
</Paragraph>
<UnorderedList>
<ListItem>
Screen magnification, voice dictation, color blindness, and those who require help with fine motor
control.
</ListItem>
<ListItem>Semantic HTML to better communicate with assistive technologies.</ListItem>
<ListItem>UI controls that are designed to be instantly recognizable and easy to see.</ListItem>
<ListItem>
Keyboard navigation and focus management to allow task completion through a variety of input devices.
</ListItem>
</UnorderedList>
<BouncyAnchor text="Learn more in our Inclusive Design Guide" href="/inclusive-design" />
</Box>
<Box>
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Image from "next/image";
import * as React from "react";

import DesignTool from "../../assets/illustrations/illo_design-tool.svg";
import { SITE_CONTENT_MAX_WIDTH } from "../../constants";
import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants";

const StatBox: React.FC<{ stat: string; description: string }> = ({ stat, description }): React.ReactElement => {
return (
Expand Down Expand Up @@ -36,7 +36,7 @@ const CommunityOfBuilders: React.FC = (): React.ReactElement => {
display="flex"
flexDirection="column"
width="100%"
maxWidth={SITE_CONTENT_MAX_WIDTH}
maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}
backgroundColor="colorBackgroundWarningWeakest"
paddingY="space170"
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
Expand Down
10 changes: 8 additions & 2 deletions packages/paste-website/src/components/homepage/DesignEfficiency.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,19 @@ import Image from "next/image";
import * as React from "react";

import TokenColors from "../../assets/illustrations/token_colors.svg";
import { SITE_CONTENT_MAX_WIDTH } from "../../constants";
import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants";
import { SectionSeparator } from "./SectionSeparator";

const DesignEfficiency: React.FC = (): React.ReactElement => {
return (
<Box display="flex" justifyContent="center" marginY="space200">
<Box element="THEMEABLE" display="flex" flexDirection="column" width="100%" maxWidth={SITE_CONTENT_MAX_WIDTH}>
<Box
element="THEMEABLE"
display="flex"
flexDirection="column"
width="100%"
maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}
>
<SectionSeparator>Design efficiency</SectionSeparator>
<Box display="flex" justifyContent="space-between">
<Box paddingTop="space190" display="flex" flexDirection="column" maxWidth="size40">
Expand Down
10 changes: 5 additions & 5 deletions packages/paste-website/src/components/homepage/NewHomeHero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import { DisplayHeading } from "@twilio-paste/display-heading";
import { Text } from "@twilio-paste/text";
import { useTheme } from "@twilio-paste/theme";

import { SITE_CONTENT_MAX_WIDTH } from "../../constants";
import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants";
import CircleIcon from "../icons/CircleIcon";
import { BouncyAnchor } from "./BouncyAnchor";
import { SearchBox } from "./SearchBox";
import { ComponentShowcase } from "./component-showcase";

const NewHomeHero = (): JSX.Element => {
const HomeHero = (): JSX.Element => {
const theme = useTheme();
return (
<Box element="HOME_HERO_WRAPPER">
Expand All @@ -18,10 +18,10 @@ const NewHomeHero = (): JSX.Element => {
position="relative"
display="grid"
gridTemplateColumns="600px min-content"
maxWidth={SITE_CONTENT_MAX_WIDTH}
maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}
marginLeft="auto"
marginRight="auto"
overflow="hidden"
overflow="visible"
element="HOME_HERO"
>
<Box
Expand Down Expand Up @@ -73,4 +73,4 @@ const NewHomeHero = (): JSX.Element => {
);
};

export { NewHomeHero };
export { HomeHero };
4 changes: 2 additions & 2 deletions packages/paste-website/src/components/homepage/NewSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Anchor } from "@twilio-paste/anchor";
import { Box } from "@twilio-paste/box";
import * as React from "react";

import { SITE_CONTENT_MAX_WIDTH } from "../../constants";
import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants";
import { WhatsNew } from "./WhatsNew";

const NewSection: React.FC = (): React.ReactElement => {
Expand All @@ -16,7 +16,7 @@ const NewSection: React.FC = (): React.ReactElement => {
justifyContent="space-between"
paddingY="space200"
width="size120"
maxWidth={SITE_CONTENT_MAX_WIDTH}
maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}
>
<WhatsNew showExternal href="#">
We&apos;re hiring a Product Designer! <Anchor href="#">Apply here</Anchor>
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-website/src/components/homepage/Templates.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ import { Pagination, PaginationArrow, PaginationItems } from "@twilio-paste/pagi
import { Text } from "@twilio-paste/text";
import * as React from "react";

import { SITE_CONTENT_MAX_WIDTH } from "../../constants";
import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants";

const Templates: React.FC = (): React.ReactElement => {
return (
<Box display="flex" justifyContent="center" marginY="space200">
<Box display="flex" justifyContent="space-between" position="relative" maxWidth={SITE_CONTENT_MAX_WIDTH}>
<Box display="flex" justifyContent="space-between" position="relative" maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}>
<Box paddingTop="space190" display="flex" flexDirection="column" maxWidth="size40">
<Heading as="h3" variant="heading20">
Explore our templates
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-website/src/components/homepage/Themeable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import * as React from "react";
import FigmaLogo from "../../assets/illustrations/figma-logo.svg";
import ReactLogo from "../../assets/illustrations/react-logo.svg";
import TypescriptLogo from "../../assets/illustrations/ts-logo.svg";
import { SITE_CONTENT_MAX_WIDTH } from "../../constants";
import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants";
import { SectionSeparator } from "./SectionSeparator";

const Themeable: React.FC = (): React.ReactElement => {
Expand All @@ -23,7 +23,7 @@ const Themeable: React.FC = (): React.ReactElement => {
justifyItems="center"
rowGap="space100"
width="100%"
maxWidth={SITE_CONTENT_MAX_WIDTH}
maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}
>
<SectionSeparator gridArea="separator">Themeable and composable</SectionSeparator>
<Box element="THISONE" gridArea="row1" width="100%">
Expand Down
Loading

0 comments on commit 16e36a3

Please sign in to comment.