Skip to content

Commit

Permalink
add utm params to chromatic link on homepage > integrations
Browse files Browse the repository at this point in the history
  • Loading branch information
@winkerVSbecks
winkerVSbecks committed Nov 7, 2024
1 parent 1cc285b commit 274a0e5
Showing 1 changed file with 108 additions and 108 deletions.
216 changes: 108 additions & 108 deletions apps/frontpage/components/home/integrations/integrations.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,231 +1,231 @@
import Image from "next/image";
import Apollo from "./images/apollo.svg";
import Axe from "./images/axe.svg";
import Chromatic from "./images/chromatic.svg";
import Cypress from "./images/cypress.svg";
import Emotion from "./images/emotion.png";
import Figma from "./images/figma.svg";
import Gatsby from "./images/gatsby.svg";
import GraphQL from "./images/graphql.svg";
import Invision from "./images/invision.svg";
import Jest from "./images/jest.svg";
import MSW from "./images/msw.svg";
import Nextjs from "./images/nextjs.svg";
import Notion from "./images/notion.svg";
import Nuxt from "./images/nuxt.svg";
import Nx from "./images/nx.svg";
import Playwright from "./images/playwright.svg";
import RedwoodJS from "./images/redwoodjs.svg";
import Sass from "./images/sass.svg";
import Sketch from "./images/sketch.svg";
import SWC from "./images/swc.png";
import Tailwind from "./images/tailwind.svg";
import TestingLib from "./images/testing-lib.png";
import UXpin from "./images/uxpin.svg";
import Vite from "./images/vite.svg";
import Webpack from "./images/webpack.svg";
import Zeplin from "./images/zeplin.svg";
import Zeroheight from "./images/zeroheight.svg";
import Ionic from "./images/ionic.svg";
import Launchdarkly from "./images/launchdarkly.svg";
import Supernova from "./images/supernova.svg";
import Image from 'next/image';
import Apollo from './images/apollo.svg';
import Axe from './images/axe.svg';
import Chromatic from './images/chromatic.svg';
import Cypress from './images/cypress.svg';
import Emotion from './images/emotion.png';
import Figma from './images/figma.svg';
import Gatsby from './images/gatsby.svg';
import GraphQL from './images/graphql.svg';
import Invision from './images/invision.svg';
import Jest from './images/jest.svg';
import MSW from './images/msw.svg';
import Nextjs from './images/nextjs.svg';
import Notion from './images/notion.svg';
import Nuxt from './images/nuxt.svg';
import Nx from './images/nx.svg';
import Playwright from './images/playwright.svg';
import RedwoodJS from './images/redwoodjs.svg';
import Sass from './images/sass.svg';
import Sketch from './images/sketch.svg';
import SWC from './images/swc.png';
import Tailwind from './images/tailwind.svg';
import TestingLib from './images/testing-lib.png';
import UXpin from './images/uxpin.svg';
import Vite from './images/vite.svg';
import Webpack from './images/webpack.svg';
import Zeplin from './images/zeplin.svg';
import Zeroheight from './images/zeroheight.svg';
import Ionic from './images/ionic.svg';
import Launchdarkly from './images/launchdarkly.svg';
import Supernova from './images/supernova.svg';

export function Integrations() {
const integrations = [
{
href: "https://storybook.js.org/blog/storybook-for-vite/",
href: 'https://storybook.js.org/blog/storybook-for-vite/',
image: Vite,
name: "Vite",
name: 'Vite',
isExternal: true,
},
{
target: "_blank",
href: "https://www.chromatic.com/",
target: '_blank',
href: 'https://www.chromatic.com/storybook?utm_source=storybook_website&utm_medium=home_integrations&utm_campaign=storybook',
image: Chromatic,
name: "Chromatic",
name: 'Chromatic',
isExternal: true,
},
{
href: `/docs/sharing/embed#embed-stories-on-other-platforms`,
image: Notion,
name: "Notion",
name: 'Notion',
},
{
href: `/docs/writing-tests/stories-in-unit-tests`,
image: TestingLib,
name: "TestingLib",
name: 'TestingLib',
},
{
href: "/addons/@react-theming/storybook-addon",
href: '/addons/@react-theming/storybook-addon',
image: Emotion,
name: "Emotion",
name: 'Emotion',
},
{
target: "_blank",
rel: "noopener nofollow noreferrer",
href: "https://medium.com/storybookjs/building-a-front-end-project-with-react-tailwindcss-and-storybook-742bdb1417da",
target: '_blank',
rel: 'noopener nofollow noreferrer',
href: 'https://medium.com/storybookjs/building-a-front-end-project-with-react-tailwindcss-and-storybook-742bdb1417da',
image: Tailwind,
name: "Tailwind",
name: 'Tailwind',
isExternal: true,
},
{
image: Jest,
name: "Jest",
href: "/addons/@storybook/addon-jest",
name: 'Jest',
href: '/addons/@storybook/addon-jest',
},
{
href: "/addons/storybook-addon-next",
href: '/addons/storybook-addon-next',
image: Nextjs,
name: "Nextjs",
name: 'Nextjs',
},
{
href: `/docs/builders/webpack#gatsby-focus-wrapper`,
image: Webpack,
name: "Webpack",
name: 'Webpack',
},
{
href: `/docs/sharing/design-integrations#figma`,
image: Figma,
name: "Figma",
name: 'Figma',
},
{
href: "https://zeroheight.com/3xlwst8/p/507ba7-storybook",
target: "_blank",
rel: "noopener nofollow noreferrer",
href: 'https://zeroheight.com/3xlwst8/p/507ba7-storybook',
target: '_blank',
rel: 'noopener nofollow noreferrer',
image: Zeroheight,
name: "Zeroheight",
name: 'Zeroheight',
isExternal: true,
},
{
href: "https://nx.dev/storybook/overview-react",
target: "_blank",
rel: "noopener nofollow noreferrer",
href: 'https://nx.dev/storybook/overview-react',
target: '_blank',
rel: 'noopener nofollow noreferrer',
image: Nx,
name: "Nx",
name: 'Nx',
isExternal: true,
},
{
href: "/addons/storybook-addon-apollo-client",
href: '/addons/storybook-addon-apollo-client',
image: Apollo,
name: "Apollo",
name: 'Apollo',
},
{
href: `/docs/writing-tests/stories-in-end-to-end-tests`,
image: Playwright,
name: "Playwright",
name: 'Playwright',
},
{
href: "/addons/@storybook/addon-a11y",
href: '/addons/@storybook/addon-a11y',
image: Axe,
name: "Axe",
name: 'Axe',
},
{
href: "https://redwoodjs.com/docs/storybook",
target: "_blank",
rel: "noopener nofollow noreferrer",
href: 'https://redwoodjs.com/docs/storybook',
target: '_blank',
rel: 'noopener nofollow noreferrer',
image: RedwoodJS,
name: "RedwoodJS",
name: 'RedwoodJS',
isExternal: true,
},
{
href: "/addons/mswjs/msw-storybook-addon",
href: '/addons/mswjs/msw-storybook-addon',
image: MSW,
name: "MSW",
name: 'MSW',
},
{
href: "/addons/storybook-zeplin",
href: '/addons/storybook-zeplin',
image: Zeplin,
name: "Zeplin",
name: 'Zeplin',
},
{
href: "/addons/tag/graphql",
href: '/addons/tag/graphql',
image: GraphQL,
name: "GraphQL",
name: 'GraphQL',
},
{
href: "/addons/storybook-addon-gatsby/",
href: '/addons/storybook-addon-gatsby/',
image: Gatsby,
name: "Gatsby",
name: 'Gatsby',
},
{
href: "/addons/storybook-addon-launchdarkly/",
href: '/addons/storybook-addon-launchdarkly/',
image: Launchdarkly,
name: "Launchdarkly",
name: 'Launchdarkly',
},
{
href: "https://github.com/storybookjs/presets/tree/master/packages/preset-scss",
href: 'https://github.com/storybookjs/presets/tree/master/packages/preset-scss',
image: Sass,
name: "Sass",
name: 'Sass',
isExternal: true,
},
{
href: "/addons/storybook-addon-swc/",
href: '/addons/storybook-addon-swc/',
image: SWC,
name: "SWC",
name: 'SWC',
},
{
href: "https://www.uxpin.com/merge/storybook-integration",
target: "_blank",
rel: "noopener nofollow noreferrer",
href: 'https://www.uxpin.com/merge/storybook-integration',
target: '_blank',
rel: 'noopener nofollow noreferrer',
image: UXpin,
name: "UXpin",
name: 'UXpin',
isExternal: true,
},
{
href: "https://ionicframework.com/blog/how-to-use-storybook-with-stencil/",
target: "_blank",
rel: "noopener nofollow noreferrer",
href: 'https://ionicframework.com/blog/how-to-use-storybook-with-stencil/',
target: '_blank',
rel: 'noopener nofollow noreferrer',
image: Ionic,
name: "Ionic",
name: 'Ionic',
isExternal: true,
},
{
href: `/docs/sharing/design-integrations`,
image: Sketch,
name: "Sketch",
name: 'Sketch',
},
{
target: "_blank",
rel: "noopener nofollow noreferrer",
href: "https://support.invisionapp.com/hc/en-us/articles/360051565792",
target: '_blank',
rel: 'noopener nofollow noreferrer',
href: 'https://support.invisionapp.com/hc/en-us/articles/360051565792',
image: Invision,
name: "Invision",
name: 'Invision',
isExternal: true,
},
{
href: "/addons/@storybook/testing-angular",
href: '/addons/@storybook/testing-angular',
image: Supernova,
name: "Supernova",
name: 'Supernova',
},
{
href: `/docs/writing-tests/stories-in-end-to-end-tests`,
image: Cypress,
name: "Cypress",
name: 'Cypress',
},
{
target: "_blank",
rel: "noopener nofollow noreferrer",
href: "https://storybook.nuxtjs.org/",
target: '_blank',
rel: 'noopener nofollow noreferrer',
href: 'https://storybook.nuxtjs.org/',
image: Nuxt,
name: "Nuxt",
name: 'Nuxt',
isExternal: true,
},
];

return (
<div className="sticky top-16 md:grid-cols-[2/3] items-center text-center w-full">
<div className="w-full grid grid-cols-[repeat(6,_minmax(auto,_80px))] auto-rows-max grid-flow-row-dense gap-5 justify-center sm:grid-cols-[repeat(10,_minmax(auto,_80px))] md:grid-cols-[repeat(6,_minmax(auto,_90px))] md:justify-end lg:gap-10">
<div className="sticky top-16 w-full items-center text-center md:grid-cols-[2/3]">
<div className="grid w-full grid-flow-row-dense auto-rows-max grid-cols-[repeat(6,_minmax(auto,_80px))] justify-center gap-5 sm:grid-cols-[repeat(10,_minmax(auto,_80px))] md:grid-cols-[repeat(6,_minmax(auto,_90px))] md:justify-end lg:gap-10">
{integrations.map(({ image, name, isExternal, ...integration }) => {
if (isExternal)
return (
<a
className="w-full h-auto flex items-center justify-center rounded-sm shadow-md pointer-events-none select-none md:pointer-events-auto"
className="pointer-events-none flex h-auto w-full select-none items-center justify-center rounded-sm shadow-md md:pointer-events-auto"
key={name}
{...integration}
>
<Image
alt={name}
className="w-full h-full block"
className="block h-full w-full"
height="80"
loading="lazy"
src={image}
Expand All @@ -235,13 +235,13 @@ export function Integrations() {
);
return (
<div
className="w-full h-auto flex items-center justify-center rounded-sm shadow-md pointer-events-none select-none md:pointer-events-auto"
className="pointer-events-none flex h-auto w-full select-none items-center justify-center rounded-sm shadow-md md:pointer-events-auto"
key={name}
{...integration}
>
<Image
alt={name}
className="w-full h-full block"
className="block h-full w-full"
height="80"
loading="lazy"
src={image}
Expand All @@ -251,7 +251,7 @@ export function Integrations() {
);
})}
</div>
<div className="hidden md:block absolute h-1/2 bottom-[-2.5rem] left-0 right-0 pointer-events-none bg-gradient-to-t from-homeBackground to-homeBackground/0" />
<div className="from-homeBackground to-homeBackground/0 pointer-events-none absolute bottom-[-2.5rem] left-0 right-0 hidden h-1/2 bg-gradient-to-t md:block" />
</div>
);
}

0 comments on commit 274a0e5

Please sign in to comment.