Old look and field removal (#3088)

* refactor: modifications applied by the codemod * refactor: manually removing other redisgn code * chore: changeset added * fix(website-components-playground): fix entry point themes usage * refactor(application-shell): restore new design info dialog * fix(application-components): fix welcome message color in public page layout * refactor(application-component): remove unnecessary background image
commercetools · May 22, 2023 · e21250f · e21250f · github-actions · May 22, 2023
1 parent 8495d95
commit e21250f
Show file tree

Hide file tree

Showing 24 changed files with 113 additions and 382 deletions.
diff --git a/.changeset/olive-shrimps-fetch.md b/.changeset/olive-shrimps-fetch.md
@@ -0,0 +1,7 @@
+---
+'@commercetools-frontend/application-components': patch
+'@commercetools-frontend/react-notifications': patch
+'@commercetools-frontend/application-shell': patch
+---
+
+Remove supporting code for look and feel migration.
diff --git a/packages/application-components/src/components/dialogs/internals/dialog-header.tsx b/packages/application-components/src/components/dialogs/internals/dialog-header.tsx
@@ -1,9 +1,6 @@
 import type { SyntheticEvent } from 'react';
 import { css } from '@emotion/react';
-import {
-  designTokens as uiKitDesignTokens,
-  useTheme,
-} from '@commercetools-uikit/design-system';
+import { designTokens as uiKitDesignTokens } from '@commercetools-uikit/design-system';
 import { CloseIcon } from '@commercetools-uikit/icons';
 import SecondaryIconButton from '@commercetools-uikit/secondary-icon-button';
 import Spacings from '@commercetools-uikit/spacings';
@@ -17,15 +14,6 @@ type Props = {
 
 type TitleProps = Pick<Props, 'title'>;
 const Title = (props: TitleProps) => {
-  const { theme } = useTheme();
-  if (theme === 'default') {
-    return (
-      <Text.Subheadline as="h4" title={props.title} truncate>
-        {props.title}
-      </Text.Subheadline>
-    );
-  }
-
   return (
     <Text.Headline as="h3" title={props.title} truncate>
       {props.title}

diff --git a/packages/application-components/src/components/internals/page-header-title.tsx b/packages/application-components/src/components/internals/page-header-title.tsx
@@ -1,7 +1,6 @@
 import { isValidElement, type ReactElement } from 'react';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useTheme } from '@commercetools-uikit/design-system';
 import Text from '@commercetools-uikit/text';
 import { designTokens as appKitDesignTokens } from '../../theming';
 
@@ -24,15 +23,10 @@ const SubtitleWrapper = styled.div`
 type TitleProps = Pick<Props, 'titleSize' | 'title' | 'truncate'>;
 
 const Title = (props: TitleProps) => {
-  const { themedValue } = useTheme();
   switch (props.titleSize) {
     case 'big':
       return (
-        <Text.Headline
-          as={themedValue('h2', 'h1')}
-          title={props.title}
-          truncate={props.truncate}
-        >
+        <Text.Headline as="h1" title={props.title} truncate={props.truncate}>
           {props.title}
         </Text.Headline>
       );
@@ -52,7 +46,6 @@ type SubtitleProps = {
 };
 
 const Subtitle = (props: SubtitleProps) => {
-  const { themedValue } = useTheme();
   if (!props.subtitle) {
     return null;
   }
@@ -64,7 +57,7 @@ const Subtitle = (props: SubtitleProps) => {
       <Text.Body
         title={typeof props.subtitle === 'string' ? props.subtitle : undefined}
         truncate={props.truncate}
-        tone={themedValue(undefined, 'secondary')}
+        tone="secondary"
       >
         {props.subtitle}
       </Text.Body>

diff --git a/packages/application-components/src/components/internals/page-header.tsx b/packages/application-components/src/components/internals/page-header.tsx
@@ -1,6 +1,5 @@
 import type { ReactElement, ReactNode } from 'react';
 import { css } from '@emotion/react';
-import { useTheme } from '@commercetools-uikit/design-system';
 import { designTokens as appKitDesignTokens } from '../../theming';
 import PageHeaderTitle from './page-header-title';
 
@@ -11,8 +10,6 @@ type Props = {
 };
 
 const PageHeader = (props: Props) => {
-  const { themedValue } = useTheme();
-
   return (
     <div
       css={css`
@@ -30,7 +27,7 @@ const PageHeader = (props: Props) => {
     >
       <PageHeaderTitle
         title={props.title}
-        titleSize={themedValue('small', 'big')}
+        titleSize="big"
         subtitle={props.subtitle}
         truncate
       />

diff --git a/packages/application-components/src/components/main-pages/info-main-page/info-main-page.tsx b/packages/application-components/src/components/main-pages/info-main-page/info-main-page.tsx
@@ -1,5 +1,4 @@
 import type { ReactElement, ReactNode } from 'react';
-import { useTheme } from '@commercetools-uikit/design-system';
 import PageHeaderTitle from '../../internals/page-header-title';
 import CustomFormMainPage from '../custom-form-main-page';
 
@@ -23,13 +22,12 @@ type InfoMainPageProps = {
 };
 
 const InfoMainPage = (props: InfoMainPageProps) => {
-  const { themedValue } = useTheme();
   return (
     <CustomFormMainPage
       title={props.title}
       subtitle={props.subtitle}
       customTitleRow={props.customTitleRow}
-      hideDivider={themedValue(false, true)}
+      hideDivider={true}
     >
       {props.children}
     </CustomFormMainPage>

diff --git a/packages/application-components/src/components/modal-pages/internals/modal-page-top-bar.tsx b/packages/application-components/src/components/modal-pages/internals/modal-page-top-bar.tsx
@@ -1,10 +1,7 @@
 import { cloneElement, type SyntheticEvent, type ReactElement } from 'react';
 import { css } from '@emotion/react';
 import { useIntl } from 'react-intl';
-import {
-  designTokens as uiKitDesignTokens,
-  useTheme,
-} from '@commercetools-uikit/design-system';
+import { designTokens as uiKitDesignTokens } from '@commercetools-uikit/design-system';
 import FlatButton from '@commercetools-uikit/flat-button';
 import { CloseIcon, AngleLeftIcon } from '@commercetools-uikit/icons';
 import SecondaryIconButton, {
@@ -63,7 +60,6 @@ const defaultProps: Pick<Props, 'color' | 'previousPathLabel'> = {
 
 const ModalPageTopBar = (props: Props) => {
   const intl = useIntl();
-  const { themedValue } = useTheme();
   return (
     <div
       css={css`
@@ -129,7 +125,7 @@ const ModalPageTopBar = (props: Props) => {
               <CloseIcon />
             </LargeIconWrapper>
           }
-          size={themedValue('medium', 'big')}
+          size="big"
         />
       )}
     </div>

diff --git a/...plication-components/src/components/modal-pages/tabular-modal-page/tabular-modal-page.tsx b/...plication-components/src/components/modal-pages/tabular-modal-page/tabular-modal-page.tsx
@@ -2,7 +2,6 @@ import { ReactElement, ReactNode, SyntheticEvent } from 'react';
 import type { CSSObject } from '@emotion/react';
 
 import { sharedMessages } from '@commercetools-frontend/i18n';
-import { useTheme } from '@commercetools-uikit/design-system';
 import Spacings from '@commercetools-uikit/spacings';
 import {
   FormPrimaryButton,
@@ -63,7 +62,6 @@ const defaultProps: Pick<Props, 'hideControls'> = {
 };
 
 const TabularModalPage = (props: Props) => {
-  const { themedValue } = useTheme();
   return (
     <ModalPage
       title={props.title}
@@ -81,7 +79,7 @@ const TabularModalPage = (props: Props) => {
         {props.customTitleRow || (
           <PageHeaderTitle
             title={props.title}
-            titleSize={themedValue('small', 'big')}
+            titleSize="big"
             subtitle={props.subtitle}
             truncate
           />

diff --git a/...onents/src/components/page-content-containers/page-content-narrow/page-content-narrow.tsx b/...onents/src/components/page-content-containers/page-content-narrow/page-content-narrow.tsx
@@ -1,7 +1,5 @@
-// TODO: @redesign cleanup
 import type { ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { useTheme } from '@commercetools-uikit/design-system';
 
 export type TPageContentNarrow = {
   children: ReactNode;
@@ -19,9 +17,6 @@ const Container = styled.div`
 `;
 
 function PageContentNarrow(props: TPageContentNarrow) {
-  const { isNewTheme } = useTheme();
-  if (!isNewTheme) return <>{props.children}</>;
-
   return (
     <Container>
       <Content>{props.children}</Content>

diff --git a/...components/src/components/page-content-containers/page-content-wide/page-content-wide.tsx b/...components/src/components/page-content-containers/page-content-wide/page-content-wide.tsx
@@ -1,13 +1,13 @@
-// TODO: @redesign cleanup
 import { Children, type ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { designTokens, useTheme } from '@commercetools-uikit/design-system';
+import { designTokens } from '@commercetools-uikit/design-system';
 import { useWarning } from '@commercetools-uikit/utils';
 
 export type TPageContentWide = {
   columns: '1' | '1/1' | '2/1';
   gapSize: '10' | '20';
   children: ReactNode;
+  // @deprecated
   themeParentSelector?: () => HTMLElement | null;
 };
 
@@ -54,16 +54,13 @@ const Container = styled.div`
 `;
 
 function PageContentWide(props: TPageContentWide) {
-  const { isNewTheme } = useTheme(props.themeParentSelector);
   const [leftChild, rightChild] = Children.toArray(props.children);
 
   useWarning(
     props.columns !== '1' || !Boolean(rightChild),
     'PageContentWide: This component only renders its first children when using a single column but you provided more that one.'
   );
 
-  if (!isNewTheme) return <>{props.children}</>;
-
   return (
     <Container>
       <Content columns={props.columns} gapSize={props.gapSize}>

diff --git a/packages/application-components/src/components/public-page-layout/public-page-layout.tsx b/packages/application-components/src/components/public-page-layout/public-page-layout.tsx
@@ -1,11 +1,8 @@
-// TODO: @redesign cleanup
 import { FC, ReactNode } from 'react';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import publicBackgroundUrl from '@commercetools-frontend/assets/images/public-background.png';
 import CommercetoolsLogoOnWhiteSvg from '@commercetools-frontend/assets/logos/color-on-white-horizontal.svg';
-import CommercetoolsLogoSvg from '@commercetools-frontend/assets/logos/commercetools_primary-logo_horizontal_white-text_RGB.svg';
-import { customProperties, useTheme } from '@commercetools-uikit/design-system';
+import { customProperties } from '@commercetools-uikit/design-system';
 import Spacings from '@commercetools-uikit/spacings';
 import Text from '@commercetools-uikit/text';
 import { designTokens as appKitDesingTokens } from '../../theming';
@@ -36,18 +33,13 @@ type TProps = {
   children: ReactNode;
 };
 
-// TODO: @redesign cleanup
-type TContainerProps = { showBackground: boolean };
-
-const Container = styled.div<TContainerProps>`
+const Container = styled.div`
   width: 100%;
   min-height: 100vh;
   display: flex;
   padding: ${customProperties.spacingXl} 0;
   justify-content: center;
   background-size: cover;
-  background-image: ${(props: TContainerProps) =>
-    props.showBackground ? `url(${publicBackgroundUrl})` : 'none'};
   background-position: center;
 `;
 const ContainerColumn = styled.div`
@@ -65,55 +57,41 @@ const PublicPageLayoutContent: FC<TProps> = (props) => {
 };
 
 const PublicPageLayout: FC<TProps> = (props) => {
-  const { themedValue } = useTheme();
-
   return (
-    <Container showBackground={themedValue(true, false)}>
+    <Container>
       <Spacings.Stack scale="xl" alignItems="center">
         <ContainerColumn>
           <div>
-            <img
-              width={themedValue('100%', undefined)}
-              src={themedValue(
-                CommercetoolsLogoSvg,
-                CommercetoolsLogoOnWhiteSvg
-              )}
-              alt="commercetools logo"
-            />
+            <img src={CommercetoolsLogoOnWhiteSvg} alt="commercetools logo" />
           </div>
         </ContainerColumn>
         {props.welcomeMessage && (
           <ContainerColumn>
             <Text.Headline as="h2">
               <div
                 css={css`
-                  color: ${customProperties.colorSurface};
-                  text-align: ${themedValue('left', 'center')};
+                  color: ${customProperties.colorSolid};
+                  text-align: center;
                 `}
               >
                 {props.welcomeMessage}
               </div>
             </Text.Headline>
           </ContainerColumn>
         )}
-        <Spacings.Stack scale={themedValue('s', 'xl')}>
+        <Spacings.Stack scale="xl">
           <PublicPageLayoutContent {...props} />
           <PublicPageLayoutContent contentScale={props.contentScale}>
             <Spacings.Stack
               scale="xs"
               alignItems={props.contentScale === 'wide' ? 'center' : 'stretch'}
             >
-              {props.legalMessage &&
-                themedValue(
-                  <Text.Body tone="inverted">{props.legalMessage}</Text.Body>,
-                  <Text.Detail tone="secondary">
-                    {props.legalMessage}
-                  </Text.Detail>
-                )}
-              {themedValue(
-                <Text.Body tone="inverted">{`${year} © commercetools`}</Text.Body>,
-                <Text.Detail tone="secondary">{`${year} © commercetools`}</Text.Detail>
+              {props.legalMessage && (
+                <Text.Detail tone="secondary">{props.legalMessage}</Text.Detail>
               )}
+              {
+                <Text.Detail tone="secondary">{`${year} © commercetools`}</Text.Detail>
+              }
             </Spacings.Stack>
           </PublicPageLayoutContent>
         </Spacings.Stack>

diff --git a/packages/application-components/src/components/tab-header/tab-header.tsx b/packages/application-components/src/components/tab-header/tab-header.tsx
@@ -2,7 +2,6 @@ import type { ReactNode } from 'react';
 import type { LocationDescriptor } from 'history';
 import { useIntl, type MessageDescriptor } from 'react-intl';
 import { Link, matchPath, useLocation } from 'react-router-dom';
-import { useTheme } from '@commercetools-uikit/design-system';
 import Text from '@commercetools-uikit/text';
 import { warning } from '@commercetools-uikit/utils';
 import { getLinkStyles } from './tab.styles';
@@ -52,16 +51,6 @@ export type TTabHeaderProps = {
 };
 
 const TabLabel = ({ children }: { children?: string }) => {
-  const { theme } = useTheme();
-
-  if (theme === 'default') {
-    return (
-      <Text.Subheadline as="h4" truncate={true}>
-        {children}
-      </Text.Subheadline>
-    );
-  }
-
   return (
     <Text.Headline as="h3" truncate={true}>
       {children}