Re-add the Title component (#2734)

Author: connor-baer

packages/circuit-ui/components/Title/Title.spec.tsx

@@ -0,0 +1,51 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { createRef } from 'react';
+
+import { axe, render } from '../../util/test-utils.js';
+
+import { Title } from './Title.js';
+
+describe('Title', () => {
+  it('should merge a custom class name with the default ones', () => {
+    const className = 'foo';
+    const { container } = render(
+      <Title as="h2" className={className}>
+        Title
+      </Title>,
+    );
+    const headline = container.querySelector('h2');
+    expect(headline?.className).toContain(className);
+  });
+
+  it('should forward a ref', () => {
+    const ref = createRef<HTMLHeadingElement>();
+    const { container } = render(
+      <Title as="h2" ref={ref}>
+        Title
+      </Title>,
+    );
+    const headline = container.querySelector('h2');
+    expect(ref.current).toBe(headline);
+  });
+
+  it('should meet accessibility guidelines', async () => {
+    const { container } = render(<Title as="h3">Subheading</Title>);
+    const actual = await axe(container);
+    expect(actual).toHaveNoViolations();
+  });
+});

packages/circuit-ui/components/Title/Title.tsx

@@ -0,0 +1,36 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { forwardRef } from 'react';
+
+import { deprecate } from '../../util/logger.js';
+import { Display, type DisplayProps } from '../Display/Display.js';
+
+export interface TitleProps extends DisplayProps {}
+
+/**
+ * @deprecated The Title component has been renamed to Display.
+ */
+export const Title = forwardRef<HTMLHeadingElement, TitleProps>(
+  (props, ref) => {
+    if (process.env.NODE_ENV !== 'production') {
+      deprecate('Title', 'The Title component has been renamed to Display.');
+    }
+
+    return <Display {...props} ref={ref} />;
+  },
+);
+
+Title.displayName = 'Title';

packages/circuit-ui/components/Title/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { Title } from './Title.js';
+
+export type { TitleProps } from './Title.js';

packages/circuit-ui/index.ts

@@ -23,6 +23,8 @@ export { Headline } from './components/Headline/index.js';
 export type { HeadlineProps } from './components/Headline/index.js';
 export { Display } from './components/Display/index.js';
 export type { DisplayProps } from './components/Display/index.js';
+export { Title } from './components/Title/index.js';
+export type { TitleProps } from './components/Title/index.js';
 export { SubHeadline } from './components/SubHeadline/index.js';
 export type { SubHeadlineProps } from './components/SubHeadline/index.js';
 export { Body } from './components/Body/index.js';

packages/eslint-plugin-circuit-ui/renamed-package-scope/index.ts

@@ -44,7 +44,7 @@ const mappings = [
 export const renamedPackageScope = createRule({
   name: 'renamed-organization-imports',
   meta: {
-    type: 'suggestion',
+    type: 'problem',
     schema: [],
     fixable: 'code',
     docs: {