Rename NotificationBanner component

.changeset/eleven-parrots-hope.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': major
+---
+
+Rename NotificationBanner component into NotificationCard.

packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v3.input.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { NotificationBanner } from '@sumup/circuit-ui';
+
+const BaseNotificationBanner = () => <NotificationBanner />;
+
+const RedNotificationBanner = styled(NotificationBanner)`
+  color: red;
+`;

packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v3.output.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { NotificationCard } from '@sumup/circuit-ui';
+
+const BaseNotificationBanner = () => <NotificationCard />;
+
+const RedNotificationBanner = styled(NotificationCard)`
+  color: red;
+`;

packages/circuit-ui/cli/migrate/__tests__/migrate.spec.js

@@ -50,6 +50,7 @@ defineTest('currency-utils', 'currency-utils-2');
 defineTest('component-names-typography');
 defineTest('typography-sizes');
 defineTest('body-variant-highlight');
+defineTest('component-names-v3');
 
 function defineTest(transformName, testFilePrefix, testOptions = {}) {
   const dirName = __dirname;

packages/circuit-ui/cli/migrate/component-names-v3.ts

@@ -0,0 +1,51 @@
+/**
+ * Copyright 2021, 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 { Transform, JSCodeshift, Collection } from 'jscodeshift';
+
+import { findImportsByPath } from './utils';
+
+function transformFactory(
+  j: JSCodeshift,
+  root: Collection,
+  componentNames: string[],
+): void {
+  const [oldComponentName, newComponentName] = componentNames;
+  const imports = findImportsByPath(j, root, '@sumup/circuit-ui');
+
+  const componentImport = imports.find((i) => i.name === oldComponentName);
+
+  if (!componentImport) {
+    return;
+  }
+
+  root
+    .find(j.Identifier)
+    .filter((nodePath) => nodePath.node.name === oldComponentName)
+    .replaceWith(j.identifier(newComponentName));
+}
+
+const transform: Transform = (file, api) => {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  [['NotificationBanner', 'NotificationCard']].forEach((componentNames) => {
+    transformFactory(j, root, componentNames);
+  });
+
+  return root.toSource();
+};
+
+export default transform;

packages/circuit-ui/components/Notification/Notification.docs.mdx

@@ -1,5 +1,5 @@
 import { Status, Props, Story } from '../../../../.storybook/components';
-import NotificationBanner from '../NotificationBanner';
+import NotificationCard from '../NotificationCard';
 import NotificationList from '../NotificationList';
 
 # Notification
@@ -41,12 +41,12 @@ to use a call to action.
 
 **Error**: When action is required by the user, attention notifications should be used and should clearly highlight which action is required. **A call to action must be displayed.**
 
-## NotificationBanner
+## NotificationCard
 
-You can display a banner with a notification with the `NotificationBanner`, and position it at the top or bottom of a view.
+You can display a banner with a notification with the `NotificationCard`, and position it at the top or bottom of a view.
 
 <Story id="components-notification-notificationbanner--base" />
-<Props of={NotificationBanner} />
+<Props of={NotificationCard} />
 
 ## NotificationList
 

packages/circuit-ui/components/Notification/Notification.stories.tsx

@@ -24,15 +24,15 @@ import Headline from '../Headline';
 import Body from '../Body';
 import Button from '../Button';
 import NotificationList from '../NotificationList';
-import NotificationBanner from '../NotificationBanner';
+import NotificationCard from '../NotificationCard';
 
 import docs from './Notification.docs.mdx';
 import { Notification, NotificationProps } from './Notification';
 
 export default {
   title: 'Components/Notification',
   component: Notification,
-  subcomponents: { NotificationList, NotificationBanner },
+  subcomponents: { NotificationList, NotificationCard },
   parameters: {
     docs: { page: docs },
   },

packages/circuit-ui/components/NotificationBanner/NotificationBanner.spec.tsx → packages/circuit-ui/components/NotificationCard/NotificationCard.spec.tsx

@@ -17,15 +17,15 @@ import React from 'react';
 
 import { create, renderToHtml, axe } from '../../util/test-utils';
 
-import { NotificationBanner } from './NotificationBanner';
+import { NotificationCard } from './NotificationCard';
 
-describe('NotificationBanner', () => {
+describe('NotificationCard', () => {
   const children = <p>This is a notification.</p>;
   /**
    * Style tests.
    */
   it('should render with default styles', () => {
-    const actual = create(<NotificationBanner>{children}</NotificationBanner>);
+    const actual = create(<NotificationCard>{children}</NotificationCard>);
     expect(actual).toMatchSnapshot();
   });
 
@@ -34,7 +34,7 @@ describe('NotificationBanner', () => {
    */
   it('should meet accessibility guidelines', async () => {
     const wrapper = renderToHtml(
-      <NotificationBanner>{children}</NotificationBanner>,
+      <NotificationCard>{children}</NotificationCard>,
     );
     const actual = await axe(wrapper);
     expect(actual).toHaveNoViolations();

packages/circuit-ui/components/NotificationBanner/NotificationBanner.stories.tsx → packages/circuit-ui/components/NotificationCard/NotificationCard.stories.tsx

@@ -21,18 +21,15 @@ import Headline from '../Headline';
 import Body from '../Body';
 import Button from '../Button';
 
-import {
-  NotificationBanner,
-  NotificationBannerProps,
-} from './NotificationBanner';
+import { NotificationCard, NotificationCardProps } from './NotificationCard';
 
 export default {
-  title: 'Components/Notification/NotificationBanner',
-  component: NotificationBanner,
+  title: 'Components/Notification/NotificationCard',
+  component: NotificationCard,
 };
 
-export const Base = (args: NotificationBannerProps) => (
-  <NotificationBanner {...args}>
+export const Base = (args: NotificationCardProps) => (
+  <NotificationCard {...args}>
     <Notification variant="success">
       <Headline as="h4" size="four" noMargin>
         New Feature — Intelligent Reporting
@@ -44,5 +41,5 @@ export const Base = (args: NotificationBannerProps) => (
         Learn more
       </Button>
     </Notification>
-  </NotificationBanner>
+  </NotificationCard>
 );

packages/circuit-ui/components/NotificationBanner/NotificationBanner.tsx → packages/circuit-ui/components/NotificationCard/NotificationCard.tsx

@@ -19,7 +19,7 @@ import { css } from '@emotion/core';
 import styled, { NoTheme, StyleProps } from '../../styles/styled';
 import { shadow } from '../../styles/style-mixins';
 
-export interface NotificationBannerProps extends HTMLProps<HTMLDivElement> {
+export interface NotificationCardProps extends HTMLProps<HTMLDivElement> {
   /**
    * A single Notification.
    */
@@ -34,23 +34,23 @@ const outerStyles = ({ theme }: StyleProps) => css`
   border-radius: 16px;
 `;
 
-const NotificationBannerOuter = styled('div')<NoTheme>(outerStyles, shadow());
+const NotificationCardOuter = styled('div')<NoTheme>(outerStyles, shadow());
 
 const innerStyles = ({ theme }: StyleProps) => css`
   label: notification-banner__inner;
   padding: ${theme.spacings.mega} ${theme.spacings.giga};
 `;
 
-const NotificationBannerInner = styled('div')<NoTheme>(innerStyles);
+const NotificationCardInner = styled('div')<NoTheme>(innerStyles);
 
 /**
- * NotificationBanner displays a persistent Notification.
+ * NotificationCard displays a persistent Notification.
  */
-export const NotificationBanner = ({
+export const NotificationCard = ({
   children,
   ...props
-}: NotificationBannerProps) => (
-  <NotificationBannerOuter {...props} aria-live="polite" role="status">
-    <NotificationBannerInner>{children}</NotificationBannerInner>
-  </NotificationBannerOuter>
+}: NotificationCardProps) => (
+  <NotificationCardOuter {...props} aria-live="polite" role="status">
+    <NotificationCardInner>{children}</NotificationCardInner>
+  </NotificationCardOuter>
 );

packages/circuit-ui/components/NotificationBanner/__snapshots__/NotificationBanner.spec.tsx.snap → packages/circuit-ui/components/NotificationCard/__snapshots__/NotificationCard.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NotificationBanner should render with default styles 1`] = `
+exports[`NotificationCard should render with default styles 1`] = `
 .circuit-1 {
   width: 100%;
   background-color: #FFF;

packages/circuit-ui/components/NotificationBanner/index.ts → packages/circuit-ui/components/NotificationCard/index.ts

@@ -13,8 +13,8 @@
  * limitations under the License.
  */
 
-import { NotificationBanner } from './NotificationBanner';
+import { NotificationCard } from './NotificationCard';
 
-export type { NotificationBannerProps } from './NotificationBanner';
+export type { NotificationCardProps } from './NotificationCard';
 
-export default NotificationBanner;
+export default NotificationCard;

packages/circuit-ui/index.ts

@@ -83,8 +83,8 @@ export type { SelectorGroupProps } from './components/SelectorGroup';
 // Notifications
 export { default as Notification } from './components/Notification';
 export type { NotificationProps } from './components/Notification';
-export { default as NotificationBanner } from './components/NotificationBanner';
-export type { NotificationBannerProps } from './components/NotificationBanner';
+export { default as NotificationCard } from './components/NotificationCard';
+export type { NotificationCardProps } from './components/NotificationCard';
 export { default as NotificationList } from './components/NotificationList';
 export type { NotificationListProps } from './components/NotificationList';