-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1822 from visualize-admin/feat/homepage-add-ons
Feat/homepage add ons
- Loading branch information
Showing
17 changed files
with
968 additions
and
89 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,38 @@ | ||
| import { Box } from "@mui/material"; | ||
| import { ReactSpecimen } from "./catalog"; | ||
|
|
||
| import { Contribute, Examples, Intro, Tutorial } from "@/homepage"; | ||
| import { Canvas, Meta } from '@storybook/blocks'; | ||
| import * as HomepageStories from './homepage.stories'; | ||
| import { | ||
| BugReport, | ||
| Contribute, | ||
| Examples, | ||
| Intro, | ||
| Newsletter, | ||
| Tutorial, | ||
| } from "@/homepage"; | ||
| import { bugReportTemplates } from "@/templates/email/bug-report"; | ||
| import { OWNER_ORGANIZATION_EMAIL } from "@/templates/email/config"; | ||
| import { featureRequestTemplates } from "@/templates/email/feature-request"; | ||
| import { Canvas, Meta } from "@storybook/blocks"; | ||
| import { createMailtoLink } from "../../app/templates/email"; | ||
| import * as HomepageStories from "./homepage.stories"; | ||
|
|
||
| <Meta of={HomepageStories} /> | ||
|
|
||
| > The Homepage is the main page you see when you enter the Visualize app. | ||
| It consists of 4 different components: Intro, Tutorial, Examples and Contribute. In order to compose a complete Homepage, you have to use them all in the correct order. | ||
| It consists of 7 different components: Intro, Tutorial, Examples, Newsletter, | ||
| Bug Reporting, Feature Requesting and Contribute. In order to compose a complete | ||
| Homepage, you have to use them all in the correct order. | ||
|
|
||
| You can either import them directly to JSX files or create a separate MDX file and use a MDXProvider to render the page (see ContentMDXProvider component). | ||
| You can either import them directly to JSX files or create a separate MDX file | ||
| and use a MDXProvider to render the page (see ContentMDXProvider component). | ||
|
|
||
| <Canvas of={HomepageStories.Homepage} /> | ||
|
|
||
|
|
||
| ## How to use | ||
|
|
||
| ```jsx | ||
| import { Contribute, Examples, Intro, Tutorial } from "../homepage"; | ||
| import { Contribute, Examples, Intro, Tutorial, Newsletter, BugReport, FeatureRequest } from "../homepage"; | ||
|
|
||
| <Intro | ||
| title="Visualize Swiss Open Government Data" | ||
|
|
@@ -38,11 +51,43 @@ import { Contribute, Examples, Intro, Tutorial } from "../homepage"; | |
| example1Description="Choose from a wide range of chart types and configure them according to your needs." | ||
| example2Headline="Use powerful customizations" | ||
| example2Description="With the help of custom filters and data segmentation, even complex issues can be visualized." | ||
| /> | ||
| <Newsletter | ||
| headline="Stay up to date" | ||
| description="Stay up to date and subscribe to our newsletter by adding your email address below." | ||
| buttonLabel="Subscribe" | ||
| buttonUrl={`mailto:${OWNER_ORGANIZATION_EMAIL}`} | ||
| /> | ||
| <FeatureRequest | ||
| headline="New feature request" | ||
| description="Submit your feature requests today and help shape the future of our platform!" | ||
| buttonLabel="Submit" | ||
| buttonUrl={createMailtoLink("en", { | ||
| recipients: { | ||
| to: "[email protected]", | ||
| cc: "[email protected]", | ||
| }, | ||
| template: featureRequestTemplates, | ||
| subject: "Visualize Feature Request", | ||
| })} | ||
| /> | ||
| <BugReport | ||
| headline="Found a bug?" | ||
| description="Please report it to us, so we can fix it as soon as possible." | ||
| buttonLabel="Report a bug" | ||
| buttonUrl={createMailtoLink("en", { | ||
| recipients: { | ||
| to: "[email protected]", | ||
| cc: "[email protected]", | ||
| }, | ||
| template: bugReportTemplates, | ||
| subject: "Visualize Bug Report", | ||
| })} | ||
| /> | ||
| <Contribute | ||
| headline="Would you like to visualize your own data?" | ||
| description="Find out how you can integrate your data into the LINDAS Linked Data Service." | ||
| buttonLabel="Learn how" | ||
| buttonUrl="https://lindas.admin.ch/?lang=en" | ||
| /> | ||
| ``` | ||
| ``` | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,21 @@ | ||
| import { Box } from "@mui/material"; | ||
| import { Meta } from "@storybook/react"; | ||
|
|
||
| import { Contribute, Examples, Intro, Tutorial } from "@/homepage"; | ||
| import { | ||
| BugReport, | ||
| Contribute, | ||
| Examples, | ||
| Intro, | ||
| Newsletter, | ||
| Tutorial, | ||
| } from "@/homepage"; | ||
| import { FeatureRequest } from "@/homepage/feature-request"; | ||
| import { Section } from "@/homepage/section"; | ||
| import { bugReportTemplates } from "@/templates/email/bug-report"; | ||
| import { OWNER_ORGANIZATION_EMAIL } from "@/templates/email/config"; | ||
| import { featureRequestTemplates } from "@/templates/email/feature-request"; | ||
|
|
||
| import { createMailtoLink } from "../../app/templates/email"; | ||
|
|
||
| import { ReactSpecimen } from "./catalog"; | ||
|
|
||
|
|
@@ -33,12 +47,55 @@ const HomepageStory = { | |
| example2Headline="Use powerful customizations" | ||
| example2Description="With the help of custom filters and data segmentation, even complex issues can be visualized." | ||
| /> | ||
| <Contribute | ||
| headline="Would you like to visualize your own data?" | ||
| description="Find out how you can integrate your data into the LINDAS Linked Data Service." | ||
| buttonLabel="Learn how" | ||
| buttonUrl="https://lindas.admin.ch/?lang=en" | ||
| /> | ||
| <Section> | ||
| <Contribute | ||
| headline="Would you like to visualize your own data?" | ||
| description="Find out how you can integrate your data into the LINDAS Linked Data Service." | ||
| buttonLabel="Learn how" | ||
| buttonUrl="https://lindas.admin.ch/?lang=en" | ||
| /> | ||
| <div style={{ width: "1px", backgroundColor: "#e5e5e5" }}></div> | ||
| <Newsletter | ||
| headline="Subscribe to our Newsletter" | ||
| description="Stay up to date and subscribe to our newsletter by adding your email address below." | ||
| buttonLabel="Subscribe" | ||
| buttonUrl={`mailto:${OWNER_ORGANIZATION_EMAIL}`} | ||
| /> | ||
| </Section> | ||
|
|
||
| <Section | ||
| sx={{ | ||
| color: "grey.800", | ||
| }} | ||
| > | ||
| <BugReport | ||
| headline="Found a bug?" | ||
| description="Please report the bug, so can fix it as soon as possible." | ||
| buttonLabel="Report a bug" | ||
| buttonUrl={createMailtoLink("en", { | ||
| recipients: { | ||
| to: "[email protected]", | ||
| cc: "[email protected]", | ||
| }, | ||
| template: bugReportTemplates, | ||
| subject: "Visualize Bug Report", | ||
| })} | ||
| /> | ||
| <div style={{ width: "1px", backgroundColor: "#cccccc" }}></div> | ||
| <FeatureRequest | ||
| headline="New feature request" | ||
| description="Submit your feature requests today and help shape the future of our platform!" | ||
| buttonLabel="Submit" | ||
| buttonUrl={createMailtoLink("en", { | ||
| recipients: { | ||
| to: "[email protected]", | ||
| cc: "[email protected]", | ||
| }, | ||
| template: featureRequestTemplates, | ||
| subject: "Visualize Feature Request", | ||
| })} | ||
| /> | ||
| </Section> | ||
| </Box> | ||
| </ReactSpecimen> | ||
| ), | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import { Button, Link, Typography } from "@mui/material"; | ||
|
|
||
| import Flex from "@/components/flex"; | ||
|
|
||
| export const BugReport = ({ | ||
| headline, | ||
| description, | ||
| buttonLabel, | ||
| buttonUrl, | ||
| }: { | ||
| headline: string; | ||
| description: string; | ||
| buttonLabel: string; | ||
| buttonUrl: string; | ||
| }) => { | ||
| return ( | ||
| <Flex | ||
| sx={{ | ||
| flexDirection: "column", | ||
| justifyContent: "space-between", | ||
| gap: "48px", | ||
| width: "100%", | ||
| }} | ||
| > | ||
| <Flex | ||
| sx={{ | ||
| width: ["100%", "100%", "70%"], | ||
| flexDirection: "column", | ||
| gap: 4, | ||
| maxWidth: ["100%", "330px"], | ||
| }} | ||
| > | ||
| <Typography | ||
| sx={{ | ||
| fontSize: ["1.125rem", "1.125rem", "1.5rem"], | ||
| lineHeight: ["1.75rem", "1.75rem", "2rem"], | ||
| }} | ||
| > | ||
| {headline} | ||
| </Typography> | ||
| <Typography component="div" variant="body1"> | ||
| {description} | ||
| </Typography> | ||
| </Flex> | ||
| <Flex | ||
| sx={{ | ||
| width: ["100%", "100%", "70%"], | ||
| maxWidth: ["100%", "330px"], | ||
| paddingBottom: ["72px", "0px"], | ||
| borderBottom: ["1px solid #e5e5e5", "none"], | ||
| }} | ||
| > | ||
| <Button | ||
| component={Link} | ||
| href={buttonUrl} | ||
| target="_blank" | ||
| variant="contained" | ||
| rel="noopener noreferrer" | ||
| color="primary" | ||
| sx={{ | ||
| textDecoration: "none", | ||
| textAlign: "center", | ||
| }} | ||
| > | ||
| {buttonLabel} | ||
| </Button> | ||
| </Flex> | ||
| </Flex> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.