@primer/react-brand 0.3.0 → 0.3.1-rc.9ad887b

package/CHANGELOG.md

@@ -0,0 +1,182 @@
+# @primer/react-brand
+
+## 0.3.1
+
+### Patch Changes
+
+- [#59](https://github.com/primer/react-brand/pull/59) [`fdc731b`](https://github.com/primer/react-brand/commit/fdc731bda050aaef7041aafe6aaa7857c49ea03b) Thanks [@rezrah](https://github.com/rezrah)! - Added `fillMedia` prop to River.Visual
+
+  Previously, all image and video children were automatically styled to fit the parent elements dimensions.
+
+  This isn't ideal in all situations, so the ability to toggle-off this behaviour is now available through an `fillMedia` prop.
+
+## 0.3.0
+
+### Minor Changes
+
+- [`c8609a8`](https://github.com/primer/react-brand/commit/c8609a8d35ea80192d85e97794390207f4624e63) Thanks [@rezrah](https://github.com/rezrah)! - added an FAQ component, which displays a list of questions and answers relating to a particular subject.
+
+  [See usage examples](https://primer.style/react-brand/components/FAQ)
+
+* [#45](https://github.com/primer/react-brand/pull/45) [`2fb6924`](https://github.com/primer/react-brand/commit/2fb6924a834ddcbad34cfb97ecfc1659d54f4ed5) Thanks [@rezrah](https://github.com/rezrah)! - > **Warning**
+
+  > This is a breaking change, but as the library is a pre-v1 release we are publishing this update as a `minor` change.
+  > Please read the following instructions carefully before updating:
+
+  ### Updated references for "left" and "right" to "start" and "end"
+
+  For improved i18n support and closer alignment with our Figma naming conventions, we have updated the references for "left" and "right" to "start" and "end" respectively in `Hero` and `River` components.
+
+  ```diff
+  - <River align="left">
+  - <River align="right">
+  + <River align="start">
+  + <River align="end">
+  ```
+
+## 0.2.1
+
+### Patch Changes
+
+- [#38](https://github.com/primer/react-brand/pull/38) [`b0c9293`](https://github.com/primer/react-brand/commit/b0c929389d62f184e5ae447c0b00e351cb2d1c6e) Thanks [@rezrah](https://github.com/rezrah)! - updated `css-loader` to generate valid (escaped) class names
+
+## 0.2.0
+
+### Minor Changes
+
+- [#33](https://github.com/primer/react-brand/pull/33) [`662fcfc`](https://github.com/primer/react-brand/commit/662fcfc6d123460730317b7ddd3d3a4622d30dce) Thanks [@rezrah](https://github.com/rezrah)! - - Adds `River` component
+
+  - Renames `LinkButton` to `Button` :warning: (see below)
+  - Button supports polymorphism and can be used `as` either `a` or `button`
+
+  ### `River`
+
+  **NEW** Component :sparkles:
+
+  <table>
+  <tr>
+  <th> Before</th> <th> After</th>
+  </tr>
+  <tr>
+  <td valign="top">❌</td>
+  <td valign="top">
+
+  ```jsx
+  // import {River} from "@primer/react-brand";
+
+  <River>
+    <River.Visual>
+      <img
+        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
+        alt="placeholder, blank area with an off-white background color"
+      />
+    </River.Visual>
+    <River.Content>
+      <Heading>Heading</Heading>
+      <Text>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
+        felis nam pulvinar risus elementum.
+      </Text>
+      <Link href="#">Call to action</Link>
+    </River.Content>
+  </River>
+  ```
+
+  </td>
+  </tr>
+  </table>
+
+  See more examples in our documentation.
+  https://primer.style/react-brand/components/River
+
+  ### `LinkButton`
+
+  > **Warning**
+  > The changes below should be considered a breaking change for anyone relying on `LinkButton`, but as we are shipping a pre-v1 library, this has been marked as a `minor` release rather than `major`. Please remember to update your usage per the below example.
+
+  <table>
+  <tr>
+  <th> Before</th> <th> After</th>
+  </tr>
+  <tr>
+  <td valign="top">
+
+  ```jsx
+  //import { LinkButton } from '@primer/react-brand';
+
+  <LinkButton href="#">Sign up</LinkButton>
+  ```
+
+  </td>
+  <td valign="top">
+
+  ```jsx
+  //import { Button } from '@primer/react-brand';
+
+  <Button as="a" href="#">
+    Sign up
+  </Button>
+  ```
+
+  </td>
+  </tr>
+  <tr>
+  <td valign="top">
+
+  ❌
+
+  </td>
+  <td valign="top">
+
+  ```jsx
+  //import { Button } from '@primer/react-brand';
+
+  <Button onClick={handler}>Sign Up</Button>
+  ```
+
+  </td>
+  </tr>
+
+  </table>
+
+## 0.1.0
+
+### Minor Changes
+
+- [#19](https://github.com/primer/react-brand/pull/19) [`3b22e9e`](https://github.com/primer/react-brand/commit/3b22e9e0823401104d6e33b3c4f8664b755ea6ba) Thanks [@colebemis](https://github.com/colebemis)! - Add `size` prop to `Hero` component
+
+### 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
+
+* [#29](https://github.com/primer/react-brand/pull/29) [`144c7d7`](https://github.com/primer/react-brand/commit/144c7d762a91cb691699e4f8923ab08385c77966) Thanks [@rezrah](https://github.com/rezrah)! - Removed `gh-variables.css` from package as Brand variables are now surfaced in main.css
+
+  **To upgrade:**
+
+  - _Remove_ `import "@primer/react-brand/lib/css/gh-variables.css"`
+
+  - _Add_ `import "@primer/react-brand/lib/css/main.css"`
+
+- [#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.
+
+* [#27](https://github.com/primer/react-brand/pull/27) [`ca2d300`](https://github.com/primer/react-brand/commit/ca2d3002ba6f7ca9c719f80077c4d95246f33410) Thanks [@rezrah](https://github.com/rezrah)! - Updated Hero text appearance
+
+  - **updated** Hero description text size from `500` to `400`
+  - **updated** button alignment to not stretch on mobile viewports
+  - **removed** `size` prop. Now only one responsive size available.
+
+## 0.0.3
+
+### Patch Changes
+
+- [#18](https://github.com/primer/react-brand/pull/18) [`0835830`](https://github.com/primer/react-brand/commit/0835830fc15c582e280ac692ff3d578d6bcf282e) Thanks [@rezrah](https://github.com/rezrah)! - Fixes for production bundles
+
+## 0.0.2
+
+### Patch Changes
+
+- [#2](https://github.com/primer/react-brand/pull/2) [`ab01a8a`](https://github.com/primer/react-brand/commit/ab01a8ad1dc504f7a2865213b6f41c0b0adba131) Thanks [@colebemis](https://github.com/colebemis)! - Initialize releases with [changesets](https://github.com/changesets/changesets)

package/lib/Accordion/Accordion.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/Button/Button.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/ExpandableArrow/ExpandableArrow.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/FAQ/FAQ.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/Heading/Heading.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/Hero/Hero.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/InlineLink/InlineLink.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/Link/Link.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/MonaSans/MonaSans.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/River/River.d.ts

@@ -51,6 +51,11 @@ declare type RiverContentProps = {
 export declare const getHeadingWarning: (size: (typeof HeadingTags)[number]) => string;
 declare function Content({ children, leadingComponent: LeadingComponent, trailingComponent: TrailingComponent }: RiverContentProps): JSX.Element;
 declare type RiverVisualProps = {
+    /**
+     * Applies automatic size constraints to child images and video.
+     * This can be disabled by setting this prop to `false`.
+     */
+    fillMedia?: boolean;
     className?: string;
     /**
      * `img` and `video` elements will apply a shadow by default.
@@ -58,7 +63,7 @@ declare type RiverVisualProps = {
      */
     hasShadow?: boolean;
 };
-declare function Visual({ children, className, hasShadow }: React.PropsWithChildren<RiverVisualProps>): JSX.Element;
+declare function Visual({ fillMedia, children, className, hasShadow }: React.PropsWithChildren<RiverVisualProps>): JSX.Element;
 /**
  * Alternating text and image pairs.
  */

package/lib/River/River.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/Text/Text.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/ThemeProvider/ThemeProvider.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/css/main.css

@@ -91,7 +91,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {
@@ -897,7 +897,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {
@@ -922,7 +922,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {
@@ -1101,7 +1101,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {
@@ -1115,7 +1115,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {
@@ -1133,7 +1133,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {
@@ -1335,7 +1335,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:38 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {
@@ -1474,7 +1474,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {
@@ -1484,7 +1484,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {
@@ -1504,17 +1504,17 @@ select {
   margin: var(--brand-River-layout-margin-vertical);
 }
 
+.Primer_Brand__River-module__River--align-center___TH7xI {
+  text-align: center;
+}
+
 .Primer_Brand__River-module__River__visual___sTe_U {
   position: relative;
   order: 2;
 }
 
-.Primer_Brand__River-module__River--align-center___TH7xI {
-  text-align: center;
-}
-
-.Primer_Brand__River-module__River__visual___sTe_U img,
-.Primer_Brand__River-module__River__visual___sTe_U video {
+.Primer_Brand__River-module__River__visual--fill-media___AVMgH img,
+.Primer_Brand__River-module__River__visual--fill-media___AVMgH video {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
@@ -1607,7 +1607,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:38 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {
@@ -1716,7 +1716,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:38 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {
@@ -1872,7 +1872,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {
@@ -1882,7 +1882,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:38 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/base/colors/color-scales.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/base/size/size.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/base/typography/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/colors/global-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/colors/global.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:38 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:38 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/faq/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:38 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/faq/colors.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/hero/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:38 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/inline-link/colors.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/river/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/size/border.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/size/breakpoints.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/size/size-coarse.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 @media (pointer: coarse) { :root {

package/lib/design-tokens/css/tokens/functional/size/size-fine.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 @media (pointer: fine) { :root {

package/lib/design-tokens/css/tokens/functional/size/size.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/typography/typography-responsive.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/typography/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 :root {

package/lib/design-tokens/js/module/tokens/base/colors/color-scales.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 module.exports = {

package/lib/design-tokens/js/module/tokens/base/size/size.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 module.exports = {

package/lib/design-tokens/js/module/tokens/base/typography/typography.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 module.exports = {

package/lib/design-tokens/js/module/tokens/functional/colors/global.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 module.exports = {

package/lib/design-tokens/js/module/tokens/functional/components/faq/base.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 module.exports = {

package/lib/design-tokens/js/module/tokens/functional/components/faq/colors.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 module.exports = {

package/lib/design-tokens/js/module/tokens/functional/components/hero/base.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:59:37 GMT
+ * Generated on Tue, 02 Aug 2022 11:23:49 GMT
  */
 
 module.exports = {