From ffc5868efb51b2eb625cea21cc0cefa43dac0028 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Robin=20M=C3=A9tral?= Date: Tue, 15 Jun 2021 13:49:02 +0200 Subject: [PATCH 1/4] Rename NotificationBanner into NotificationCard --- .../Notification/Notification.docs.mdx | 8 ++++---- .../Notification/Notification.stories.tsx | 4 ++-- .../NotificationCard.spec.tsx} | 8 ++++---- .../NotificationCard.stories.tsx} | 15 ++++++--------- .../NotificationCard.tsx} | 18 +++++++++--------- .../NotificationCard.spec.tsx.snap} | 2 +- .../index.ts | 6 +++--- packages/circuit-ui/index.ts | 4 ++-- 8 files changed, 31 insertions(+), 34 deletions(-) rename packages/circuit-ui/components/{NotificationBanner/NotificationBanner.spec.tsx => NotificationCard/NotificationCard.spec.tsx} (82%) rename packages/circuit-ui/components/{NotificationBanner/NotificationBanner.stories.tsx => NotificationCard/NotificationCard.stories.tsx} (80%) rename packages/circuit-ui/components/{NotificationBanner/NotificationBanner.tsx => NotificationCard/NotificationCard.tsx} (71%) rename packages/circuit-ui/components/{NotificationBanner/__snapshots__/NotificationBanner.spec.tsx.snap => NotificationCard/__snapshots__/NotificationCard.spec.tsx.snap} (84%) rename packages/circuit-ui/components/{NotificationBanner => NotificationCard}/index.ts (78%) diff --git a/packages/circuit-ui/components/Notification/Notification.docs.mdx b/packages/circuit-ui/components/Notification/Notification.docs.mdx index e12218a5f5..72033b4856 100644 --- a/packages/circuit-ui/components/Notification/Notification.docs.mdx +++ b/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. - + ## NotificationList diff --git a/packages/circuit-ui/components/Notification/Notification.stories.tsx b/packages/circuit-ui/components/Notification/Notification.stories.tsx index 3da7c39ca5..33a95ed994 100644 --- a/packages/circuit-ui/components/Notification/Notification.stories.tsx +++ b/packages/circuit-ui/components/Notification/Notification.stories.tsx @@ -24,7 +24,7 @@ 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'; @@ -32,7 +32,7 @@ import { Notification, NotificationProps } from './Notification'; export default { title: 'Components/Notification', component: Notification, - subcomponents: { NotificationList, NotificationBanner }, + subcomponents: { NotificationList, NotificationCard }, parameters: { docs: { page: docs }, }, diff --git a/packages/circuit-ui/components/NotificationBanner/NotificationBanner.spec.tsx b/packages/circuit-ui/components/NotificationCard/NotificationCard.spec.tsx similarity index 82% rename from packages/circuit-ui/components/NotificationBanner/NotificationBanner.spec.tsx rename to packages/circuit-ui/components/NotificationCard/NotificationCard.spec.tsx index f94e534c6b..6fae01c1c1 100644 --- a/packages/circuit-ui/components/NotificationBanner/NotificationBanner.spec.tsx +++ b/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 =

This is a notification.

; /** * Style tests. */ it('should render with default styles', () => { - const actual = create({children}); + const actual = create({children}); expect(actual).toMatchSnapshot(); }); @@ -34,7 +34,7 @@ describe('NotificationBanner', () => { */ it('should meet accessibility guidelines', async () => { const wrapper = renderToHtml( - {children}, + {children}, ); const actual = await axe(wrapper); expect(actual).toHaveNoViolations(); diff --git a/packages/circuit-ui/components/NotificationBanner/NotificationBanner.stories.tsx b/packages/circuit-ui/components/NotificationCard/NotificationCard.stories.tsx similarity index 80% rename from packages/circuit-ui/components/NotificationBanner/NotificationBanner.stories.tsx rename to packages/circuit-ui/components/NotificationCard/NotificationCard.stories.tsx index 5939de1859..c01b6fa654 100644 --- a/packages/circuit-ui/components/NotificationBanner/NotificationBanner.stories.tsx +++ b/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) => ( - +export const Base = (args: NotificationCardProps) => ( + New Feature — Intelligent Reporting @@ -44,5 +41,5 @@ export const Base = (args: NotificationBannerProps) => ( Learn more - + ); diff --git a/packages/circuit-ui/components/NotificationBanner/NotificationBanner.tsx b/packages/circuit-ui/components/NotificationCard/NotificationCard.tsx similarity index 71% rename from packages/circuit-ui/components/NotificationBanner/NotificationBanner.tsx rename to packages/circuit-ui/components/NotificationCard/NotificationCard.tsx index 9c48249637..9f56ebaa0e 100644 --- a/packages/circuit-ui/components/NotificationBanner/NotificationBanner.tsx +++ b/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 { +export interface NotificationCardProps extends HTMLProps { /** * A single Notification. */ @@ -34,23 +34,23 @@ const outerStyles = ({ theme }: StyleProps) => css` border-radius: 16px; `; -const NotificationBannerOuter = styled('div')(outerStyles, shadow()); +const NotificationCardOuter = styled('div')(outerStyles, shadow()); const innerStyles = ({ theme }: StyleProps) => css` label: notification-banner__inner; padding: ${theme.spacings.mega} ${theme.spacings.giga}; `; -const NotificationBannerInner = styled('div')(innerStyles); +const NotificationCardInner = styled('div')(innerStyles); /** - * NotificationBanner displays a persistent Notification. + * NotificationCard displays a persistent Notification. */ -export const NotificationBanner = ({ +export const NotificationCard = ({ children, ...props -}: NotificationBannerProps) => ( - - {children} - +}: NotificationCardProps) => ( + + {children} + ); diff --git a/packages/circuit-ui/components/NotificationBanner/__snapshots__/NotificationBanner.spec.tsx.snap b/packages/circuit-ui/components/NotificationCard/__snapshots__/NotificationCard.spec.tsx.snap similarity index 84% rename from packages/circuit-ui/components/NotificationBanner/__snapshots__/NotificationBanner.spec.tsx.snap rename to packages/circuit-ui/components/NotificationCard/__snapshots__/NotificationCard.spec.tsx.snap index d45175ed5b..7a2506417c 100644 --- a/packages/circuit-ui/components/NotificationBanner/__snapshots__/NotificationBanner.spec.tsx.snap +++ b/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; diff --git a/packages/circuit-ui/components/NotificationBanner/index.ts b/packages/circuit-ui/components/NotificationCard/index.ts similarity index 78% rename from packages/circuit-ui/components/NotificationBanner/index.ts rename to packages/circuit-ui/components/NotificationCard/index.ts index dabd5114cc..96c99aac0f 100644 --- a/packages/circuit-ui/components/NotificationBanner/index.ts +++ b/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; diff --git a/packages/circuit-ui/index.ts b/packages/circuit-ui/index.ts index e331c74678..76eb53272b 100644 --- a/packages/circuit-ui/index.ts +++ b/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'; From 34a689181a852a3e5014ec36765c1e4795ded880 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Robin=20M=C3=A9tral?= Date: Tue, 15 Jun 2021 14:09:17 +0200 Subject: [PATCH 2/4] Add codemod for NotificationBanner rename --- .../component-names-v3.input.js | 9 ++++ .../component-names-v3.output.js | 9 ++++ .../cli/migrate/__tests__/migrate.spec.js | 1 + .../cli/migrate/component-names-v3.ts | 51 +++++++++++++++++++ 4 files changed, 70 insertions(+) create mode 100644 packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v3.input.js create mode 100644 packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v3.output.js create mode 100644 packages/circuit-ui/cli/migrate/component-names-v3.ts diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v3.input.js b/packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v3.input.js new file mode 100644 index 0000000000..631a3217a4 --- /dev/null +++ b/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 = () => ; + +const RedNotificationBanner = styled(NotificationBanner)` + color: red; +`; diff --git a/packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v3.output.js b/packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v3.output.js new file mode 100644 index 0000000000..579435f4a4 --- /dev/null +++ b/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 = () => ; + +const RedNotificationBanner = styled(NotificationCard)` + color: red; +`; diff --git a/packages/circuit-ui/cli/migrate/__tests__/migrate.spec.js b/packages/circuit-ui/cli/migrate/__tests__/migrate.spec.js index feeefb0264..f1c8b12c85 100644 --- a/packages/circuit-ui/cli/migrate/__tests__/migrate.spec.js +++ b/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; diff --git a/packages/circuit-ui/cli/migrate/component-names-v3.ts b/packages/circuit-ui/cli/migrate/component-names-v3.ts new file mode 100644 index 0000000000..523f8c6a4a --- /dev/null +++ b/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; From 6e56dbe8b78a67f7e6dcaedab82bc16a13e984ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Robin=20M=C3=A9tral?= Date: Tue, 15 Jun 2021 14:10:40 +0200 Subject: [PATCH 3/4] Add changeset --- .changeset/eleven-parrots-hope.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/eleven-parrots-hope.md diff --git a/.changeset/eleven-parrots-hope.md b/.changeset/eleven-parrots-hope.md new file mode 100644 index 0000000000..91bf73ce78 --- /dev/null +++ b/.changeset/eleven-parrots-hope.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': major +--- + +Rename NotificationBanner component into NotificationCard. From 55993acf6550c20eb47a28541115c35400e31b84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Robin=20M=C3=A9tral?= Date: Tue, 15 Jun 2021 14:21:58 +0200 Subject: [PATCH 4/4] Update changeset --- .changeset/eleven-parrots-hope.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/eleven-parrots-hope.md b/.changeset/eleven-parrots-hope.md index 91bf73ce78..6562fc1e33 100644 --- a/.changeset/eleven-parrots-hope.md +++ b/.changeset/eleven-parrots-hope.md @@ -2,4 +2,4 @@ '@sumup/circuit-ui': major --- -Rename NotificationBanner component into NotificationCard. +Renamed the NotificationBanner component to NotificationCard. This frees up the NotificationBanner namespace for a new component that we will introduce in `v3.x`.