@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
96 lines (95 loc) • 4.03 kB
TypeScript
import React, { PropsWithChildren } from 'react';
import { BaseProps } from '../component-helpers';
/**
* Design tokens
*/
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/footer/colors-with-modes.css';
declare const socialLinkData: {
readonly x: {
readonly fullName: "X";
readonly url: "https://x.com/github";
readonly icon: "https://github.githubassets.com/images/modules/site/icons/footer/x.svg";
readonly iconWidth: 20;
readonly iconHeight: 16;
};
readonly github: {
readonly fullName: "GitHub";
readonly url: "https://github.com/github";
readonly icon: "https://github.githubassets.com/images/modules/site/icons/footer/github-mark.svg";
readonly iconWidth: 20;
readonly iconHeight: 20;
};
readonly linkedin: {
readonly fullName: "LinkedIn";
readonly url: "https://www.linkedin.com/company/github";
readonly icon: "https://github.githubassets.com/images/modules/site/icons/footer/linkedin.svg";
readonly iconWidth: 19;
readonly iconHeight: 18;
};
readonly youtube: {
readonly fullName: "YouTube";
readonly url: "https://www.youtube.com/github";
readonly icon: "https://github.githubassets.com/images/modules/site/icons/footer/youtube.svg";
readonly iconWidth: 23;
readonly iconHeight: 16;
};
readonly facebook: {
readonly fullName: "Facebook";
readonly url: "https://www.facebook.com/GitHub";
readonly icon: "https://github.githubassets.com/images/modules/site/icons/footer/facebook.svg";
readonly iconWidth: 18;
readonly iconHeight: 18;
};
readonly twitch: {
readonly fullName: "Twitch";
readonly url: "https://www.twitch.tv/github";
readonly icon: "https://github.githubassets.com/images/modules/site/icons/footer/twitch.svg";
readonly iconWidth: 18;
readonly iconHeight: 18;
};
readonly tiktok: {
readonly fullName: "TikTok";
readonly url: "https://www.tiktok.com/@github";
readonly icon: "https://github.githubassets.com/images/modules/site/icons/footer/tiktok.svg";
readonly iconWidth: 18;
readonly iconHeight: 18;
};
readonly instagram: {
readonly fullName: "Instagram";
readonly url: "https://www.instagram.com/github/";
readonly icon: "https://github.githubassets.com/images/modules/site/icons/footer/instagram.svg";
readonly iconWidth: 24;
readonly iconHeight: 24;
};
};
type SocialLinkName = keyof typeof socialLinkData;
export type MinimalFooterProps = {
/**
* An array of social links to be displayed in the footer.
*/
socialLinks?: SocialLinkName[] | false;
/**
* The href for the GitHub logo.
*/
logoHref?: string;
/**
* The copyright statement to be displayed in the footer.
* If not provided, the copyright statement will be the default GitHub copyright statement.
*/
copyrightStatement?: string | React.ReactElement;
} & BaseProps<HTMLElement>;
declare function Root({ className, children, copyrightStatement, logoHref, socialLinks, ...rest }: PropsWithChildren<MinimalFooterProps>): import("react/jsx-runtime").JSX.Element;
type FootnoteProps = BaseProps<HTMLElement>;
declare function Footnotes({ children, className }: PropsWithChildren<FootnoteProps>): import("react/jsx-runtime").JSX.Element;
type LinkProps<C extends React.ElementType> = BaseProps<C> & {
as?: 'a' | 'button';
} & Omit<React.ComponentPropsWithoutRef<C>, keyof C>;
/**
* Use MinimalFooter to render a global footer on all GitHub pages.
* @see https://primer.style/brand/components/MinimalFooter
*/
export declare const MinimalFooter: typeof Root & {
Footnotes: typeof Footnotes;
Link: <C extends React.ElementType = "a">({ as, children, ...rest }: PropsWithChildren<LinkProps<C>>) => import("react/jsx-runtime").JSX.Element;
};
export {};