feat(notifications): add support for regular weight title

packages/notifications/.size-snapshot.json

@@ -19,21 +19,21 @@
     }
   },
   "index.cjs.js": {
-    "bundled": 19391,
-    "minified": 14041,
-    "gzipped": 3156
+    "bundled": 19443,
+    "minified": 14081,
+    "gzipped": 3169
   },
   "index.esm.js": {
-    "bundled": 18416,
-    "minified": 13130,
-    "gzipped": 3055,
+    "bundled": 18468,
+    "minified": 13170,
+    "gzipped": 3067,
     "treeshaked": {
       "rollup": {
-        "code": 10050,
+        "code": 10090,
         "import_statements": 282
       },
       "webpack": {
-        "code": 12237
+        "code": 12277
       }
     }
   }

packages/notifications/examples/basic.md

@@ -23,7 +23,7 @@ const alertTitles = {
   info: 'Info Alert'
 };
 
-const initialState = { type: 'success', showClose: true };
+const initialState = { type: 'success', showClose: true, isRegular: false };
 
 <Grid>
   <Row>
@@ -81,11 +81,20 @@ const initialState = { type: 'success', showClose: true };
             <Label>Show Close</Label>
           </Toggle>
         </Field>
+
+        <Field className="u-mt-xs">
+          <Toggle
+            checked={state.isRegular}
+            onChange={event => setState({ isRegular: event.target.checked })}
+          >
+            <Label>Regular Weight Title</Label>
+          </Toggle>
+        </Field>
       </Well>
     </Col>
     <Col md={8}>
       <Alert type={state.type}>
-        <Title>{alertTitles[state.type]}</Title>
+        <Title isRegular={state.isRegular}>{alertTitles[state.type]}</Title>
         Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth
         tatsoi tomatillo melon.
         {state.showClose && (
@@ -127,7 +136,8 @@ const notificationTitles = {
 
 const initialState = {
   type: undefined,
-  isMultiLine: false
+  isMultiLine: false,
+  isRegular: false
 };
 
 <Grid>
@@ -195,11 +205,20 @@ const initialState = {
             <Label>Show Multi-line</Label>
           </Toggle>
         </Field>
+
+        <Field className="u-mt-xs">
+          <Toggle
+            checked={state.isRegular}
+            onChange={event => setState({ isRegular: event.target.checked })}
+          >
+            <Label>Regular Weight Title</Label>
+          </Toggle>
+        </Field>
       </Well>
     </Col>
     <Col md={8}>
       <Notification type={state.type}>
-        <Title>
+        <Title isRegular={state.isRegular}>
           Notification{notificationTitles[state.type] ? `: ${notificationTitles[state.type]}` : ''}
           {state.isMultiLine ? ' (Multi-line)' : ''}
         </Title>
@@ -232,7 +251,8 @@ const { Field, Label, Radio, Toggle } = require('@zendeskgarden/react-forms/src'
 const initialState = {
   isFloating: false,
   isRecessed: false,
-  isMultiLine: false
+  isMultiLine: false,
+  isRegular: false
 };
 
 <Grid>
@@ -263,11 +283,19 @@ const initialState = {
             <Label>Show Multi-line</Label>
           </Toggle>
         </Field>
+        <Field className="u-mt-xs">
+          <Toggle
+            checked={state.isRegular}
+            onChange={event => setState({ isRegular: event.target.checked })}
+          >
+            <Label>Regular Weight Title</Label>
+          </Toggle>
+        </Field>
       </Well>
     </Col>
     <Col md={8}>
       <Well isRecessed={state.isRecessed} isFloating={state.isFloating}>
-        <Title>Well {state.isMultiLine && '(Multi-line)'}</Title>
+        <Title isRegular={state.isRegular}>Well {state.isMultiLine && '(Multi-line)'}</Title>
         {state.isMultiLine ? (
           <Paragraph>
             Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery.

packages/notifications/src/elements/content/Title.spec.tsx

@@ -23,19 +23,36 @@ describe('Title', () => {
 
   describe('Types', () => {
     it('renders default styling', () => {
-      const { container } = render(
+      const { container, getByText } = render(
         <Notification>
           <Title>title</Title>
         </Notification>
       );
 
+      expect(getByText('title')).toHaveStyleRule(
+        'font-weight',
+        `${DEFAULT_THEME.fontWeights.semibold}`
+      );
       expect(container.firstChild).toHaveStyleRule('color', 'inherit', {
         modifier: css`
           ${StyledTitle}
         ` as any
       });
     });
 
+    it('renders isRegular styling', () => {
+      const { getByText } = render(
+        <Notification>
+          <Title isRegular>title</Title>
+        </Notification>
+      );
+
+      expect(getByText('title')).toHaveStyleRule(
+        'font-weight',
+        `${DEFAULT_THEME.fontWeights.regular}`
+      );
+    });
+
     it('renders success styling', () => {
       const { container } = render(
         <Notification type="success">

packages/notifications/src/elements/content/Title.tsx

@@ -8,14 +8,19 @@
 import React, { HTMLAttributes } from 'react';
 import { StyledTitle } from '../../styled';
 
+export interface ITitleProps extends HTMLAttributes<HTMLDivElement> {
+  /** Style using regular (non-bold) font weight */
+  isRegular?: boolean;
+}
+
 /**
  * Used for Notification titles. Supports all `<div>` props.
  * For improved semantics, pass an "h1" or "strong" to the `as` prop.
  * Additional styles can be applied to the `as` element to override
  * user agent stylesheets.
  */
-export const Title = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  (props, ref) => <StyledTitle ref={ref} {...props} />
-);
+export const Title = React.forwardRef<HTMLDivElement, ITitleProps>((props, ref) => (
+  <StyledTitle ref={ref} {...props} />
+));
 
 Title.displayName = 'Title';

packages/notifications/src/styled/content/StyledTitle.ts

@@ -10,16 +10,21 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 
 const COMPONENT_ID = 'notifications.title';
 
+export interface IStyledTitleProps {
+  isRegular?: boolean;
+}
+
 /**
  * 1. Reset for <h1>, etc.
  */
 export const StyledTitle = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
-})`
+})<IStyledTitleProps>`
   margin: 0; /* [1] */
   color: ${props => props.theme.colors.foreground};
-  font-weight: ${props => props.theme.fontWeights.semibold};
+  font-weight: ${props =>
+    props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold};
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;