@primer/react-brand@0.5.2

Patch Changes

• #92 fcef134 Thanks @rezrah! - No updates in this release.

  New package versions published to verify the release process.

@primer/brand-primitives@0.5.2

Patch Changes

• #92 fcef134 Thanks @rezrah! - No updates in this release.

  New package versions published to verify the release process.

v0.5.1

Patch Changes

• #87 0a82cd4 Thanks @rezrah! - UI bugfixes for SubdomainNavBar and Testimonial components.

  SubdomainNavBar

  • Fix bug where a missing SubdomainNavBar.Search child would cause the SubdomainNavBar to render incorrectly, despite being optional.
  • Fix bug where the overflow menu still appears when there are no items in the overflow menu.
  • Fix bug where longer titles caused text wrapping and layout issues. Slightly longer titles are now accepted.

  Testimonial

  • Increase spacing beneath the quote visual to 48px from 45px.

• #89 396734e Thanks @rezrah! - Add titleHref and fullWidth props for SubdomainNavBar

  Usage example:

  <SubdomainNavBar fullWidth={true} titleHref="/something-other-than-home" title="Subdomain">
    {/* ... */}
  </SubdomainNavBar>

v0.5.0

Minor Changes

• #81 88e2007 Thanks @rezrah! - Added SubdomainNavBar component.

  Usage example:

  <SubdomainNavBar title="Subdomain">
    <SubdomainNavBar.Link href="#">Collections</SubdomainNavBar.Link>
    <SubdomainNavBar.Link href="#">Topics</SubdomainNavBar.Link>
    <SubdomainNavBar.Link href="#">Articles</SubdomainNavBar.Link>
    <SubdomainNavBar.Link href="#">Events</SubdomainNavBar.Link>
    <SubdomainNavBar.Link href="#">Video</SubdomainNavBar.Link>
    <SubdomainNavBar.Link href="#">Social</SubdomainNavBar.Link>
    <SubdomainNavBar.Search ref={inputRef} onSubmit={handleSubmit} />
    <SubdomainNavBar.PrimaryAction href="#">Primary CTA</SubdomainNavBar.PrimaryAction>
    <SubdomainNavBar.SecondaryAction href="#">Secondary CTA</SubdomainNavBar.SecondaryAction>
  </SubdomainNavBar>

  See the documentation and Storybook for more usage examples.

• #82 afbab6c Thanks @rezrah! - Added Testimonial component.

  Usage example:

  <Testimonial>
    <Testimonial.Quote>
      GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
      of code we&apos;re writing.
    </Testimonial.Quote>
    <Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name>
    <Testimonial.Avatar
      src="https://avatars.githubusercontent.com/u/92997159?v=4"
      alt="Circular avatar from David Ross's GitHub profile"
    />
  </Testimonial>

  See the documentation or Storybook for more usage examples.

• #82 afbab6c Thanks @rezrah! - Added Stack component.

  Usage example:

  <Stack direction="horizontal" gap="spacious" padding="spacious">
    <div>
      <img
        src="https://via.placeholder.com/300x150/f5f5f5/f5f5f5.png"
        alt="placeholder with gray background and no foreground text"
      />
    </div>
    <div>
      <img
        src="https://via.placeholder.com/300x150/f5f5f5/f5f5f5.png"
        alt="placeholder with gray background and no foreground text"
      />
    </div>
    <div>
      <img
        src="https://via.placeholder.com/300x150/f5f5f5/f5f5f5.png"
        alt="placeholder with gray background and no foreground text"
      />
    </div>
  </Stack>

  See Storybook for more usage examples.

v0.4.0

Minor Changes

• #78 487a9e7 Thanks @JoshBowdenConcepts! - Added a new size prop to Button and a medium sized variant, making the previous large size optional.

  ⚠️ This update should be considered a breaking change, despite being issued in a minor release.

  Selectable values: medium (default) and large.

  Upgrade steps:

  - <Button>before</Button>
  + <Button size="large">after</Button>

• #69 7838af5 Thanks @rezrah! - Added FormControl, Checkbox, TextInput and Select components.

  Read the Technical Previews for usage examples:

  🔗 FormControl

  🔗 Checkbox

  🔗 TextInput

  🔗 Select

v0.3.1

Patch Changes

• #59 fdc731b Thanks @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.

v0.3.0

Minor Changes

• c8609a8 Thanks @rezrah! - added an FAQ component, which displays a list of questions and answers relating to a particular subject.

  See usage examples

• #45 2fb6924 Thanks @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.

  - <River align="left">
  - <River align="right">
  + <River align="start">
  + <River align="end">

v0.2.1

Patch Changes

• #38 b0c9293 Thanks @rezrah! - updated css-loader to generate valid (escaped) class names

v0.2.0

Minor Changes

• #33 662fcfc Thanks @rezrah! - - Adds River component

  • Renames LinkButton to Button ⚠️ (see below)
  • Button supports polymorphism and can be used as either a or button

  River

  NEW Component ✨

  Before

  After

  ❌

  // 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>

  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.

  Before	After
  //import { LinkButton } from '@primer/react-brand'; <LinkButton href="#">Sign up</LinkButton>	//import { Button } from '@primer/react-brand'; <Button as="a" href="#"> Sign up </Button>
  ❌	//import { Button } from '@primer/react-brand'; <Button onClick={handler}>Sign Up</Button>

v0.1.0

Minor Changes

• #19 3b22e9e Thanks @colebemis! - Add size prop to Hero component

Patch Changes

• #23 77abf53 Thanks @rezrah! - add Text and Heading components

• #29 144c7d7 Thanks @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 77abf53 Thanks @rezrah! - forward className in Hero

• #25 4b00b72 Thanks @rezrah! - adds baseline tokens

• #21 ab06cce Thanks @rezrah! - Remove fixed background color from Hero to allow underlying customisation to be surfaced.

• #27 ca2d300 Thanks @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.