@primer/react-brand 0.1.0-rc.0c7d40e → 0.1.0-rc.c341bbe

package/CHANGELOG.md

@@ -8,6 +8,10 @@
 
 ### Patch Changes
 
+- [#23](https://github.com/primer/react-brand/pull/23) [`77abf53`](https://github.com/primer/react-brand/commit/77abf535e77ef26fa29fb09d6d2dfb746f4bc383) Thanks [@rezrah](https://github.com/rezrah)! - add Text and Heading components
+
+* [#23](https://github.com/primer/react-brand/pull/23) [`77abf53`](https://github.com/primer/react-brand/commit/77abf535e77ef26fa29fb09d6d2dfb746f4bc383) Thanks [@rezrah](https://github.com/rezrah)! - forward className in Hero
+
 - [#25](https://github.com/primer/react-brand/pull/25) [`4b00b72`](https://github.com/primer/react-brand/commit/4b00b72f5dbf5e578351ea77e1e74cddc69833e7) Thanks [@rezrah](https://github.com/rezrah)! - adds baseline tokens
 
 * [#21](https://github.com/primer/react-brand/pull/21) [`ab06cce`](https://github.com/primer/react-brand/commit/ab06cceb6ed3b2eaca70f9738b9708343b4e6db9) Thanks [@rezrah](https://github.com/rezrah)! - Remove fixed background color from `Hero` to allow underlying customisation to be surfaced.

package/fonts/fonts.css

@@ -0,0 +1,30 @@
+@font-face {
+  font-family: 'Alliance1';
+  src: url('./alliance-1.woff2') format('woff2 supports variations'),
+    url('./alliance-1.woff2') format('woff2-variations');
+  font-weight: 200 900;
+  font-display: swap;
+  font-synthesis: none;
+}
+
+@font-face {
+  font-family: 'Alliance1Fallback';
+  size-adjust: 104.5%;
+  ascent-override: 71%;
+  src: local(Arial);
+}
+
+@font-face {
+  font-family: 'Alliance1HeaderFallback';
+  size-adjust: 103.1%;
+  ascent-override: 70%;
+  src: local(Arial Bold);
+}
+
+@font-face {
+  font-family: 'Alliance2';
+  src: url('./alliance-2.woff2') format('woff2 supports variations'),
+    url('./alliance-2.woff2') format('woff2-variations');
+  font-weight: 200 900;
+  font-display: swap;
+}

package/lib/Heading/Heading.d.ts

@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from 'react';
+export declare const HeadingSizes: readonly ["1", "2", "3", "4", "5", "6"];
+export declare const HeadingTags: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
+export declare const defaultHeadingTag: "h2";
+export declare const classMap: {
+    h1: "1";
+    h2: "2";
+    h3: "3";
+    h4: "4";
+    h5: "5";
+    h6: "6";
+};
+declare type HeadingTags = {
+    as?: typeof HeadingTags[number];
+} & React.HTMLAttributes<HTMLHeadingElement>;
+declare type HeadingProps = {
+    className?: string;
+} & HeadingTags;
+export declare function Heading({ className, children, as, ...rest }: PropsWithChildren<HeadingProps>): JSX.Element;
+export {};

package/lib/Heading/index.d.ts

@@ -0,0 +1 @@
+export * from './Heading';

package/lib/Hero/Hero.d.ts

@@ -4,6 +4,7 @@ declare type Action = {
     href: string;
 };
 export declare type HeroProps = {
+    className?: string;
     heading: string | React.ReactElement;
     description?: string | React.ReactElement;
     primaryAction: Action;
@@ -11,5 +12,5 @@ export declare type HeroProps = {
     align?: 'start' | 'center';
     size?: 'small' | 'large';
 };
-export declare function Hero({ heading, description, primaryAction, secondaryAction, align, size }: HeroProps): JSX.Element;
+export declare function Hero({ className, heading, description, primaryAction, secondaryAction, align, size }: HeroProps): JSX.Element;
 export {};

package/lib/MonaSans/MonaSans.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare type MonaSansProps = {
+    children: string | React.ReactElement;
+    italic?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10';
+    size?: number;
+    weight?: number;
+    width?: number;
+};
+export declare function MonaSans({ children, italic, size, weight, width }: MonaSansProps): JSX.Element;
+export {};

package/lib/MonaSans/index.d.ts

@@ -0,0 +1 @@
+export * from './MonaSans';

package/lib/Text/Text.d.ts

@@ -0,0 +1,36 @@
+import React, { PropsWithChildren } from 'react';
+export declare const TextSizes: readonly ["700", "600", "500", "400", "300", "200", "100"];
+export declare const TextTags: readonly ["p", "span", "div"];
+export declare const TextVariants: readonly ["default", "muted"];
+export declare const defaultTextTag: "span";
+export declare const defaultTextSize: "400";
+export declare const defaultTextVariant: "default";
+declare type RestrictedPolymorphism = (React.HTMLAttributes<HTMLParagraphElement> & {
+    as?: 'p';
+}) | (React.HTMLAttributes<HTMLSpanElement> & {
+    as?: 'span';
+}) | (React.HTMLAttributes<HTMLDivElement> & {
+    as?: 'div';
+});
+declare type TextTags = {
+    /**
+     * Applies the underlying HTML element
+     */
+    as?: typeof TextTags[number];
+} & RestrictedPolymorphism;
+declare type TextProps = {
+    /**
+     * Forward a custom HTML class attribute
+     */
+    className?: string;
+    /**
+     * Specify the text size
+     */
+    size?: typeof TextSizes[number];
+    /**
+     * Specify alternative text appearance
+     */
+    variant?: typeof TextVariants[number];
+} & TextTags;
+export declare function Text({ as, className, children, size, variant, ...rest }: PropsWithChildren<TextProps>): JSX.Element;
+export {};

package/lib/Text/index.d.ts

@@ -0,0 +1 @@
+export * from './Text';