[core]: Refactor and test Lifecycle component (#952)

* refactor(core): Lifecycle component

* tests(core): Lifecycle component

* fix(core): Lifecycle contional className

* fix(core): remove "is" prefix from Lifecycle props

packages/core/src/components/Lifecycle/Lifecycle.stories.tsx

@@ -14,20 +14,30 @@
  * limitations under the License.
  */
 import React from 'react';
-import { AlphaLabel } from './Lifecycle';
+import { Lifecycle } from './Lifecycle';
 
 export default {
-  title: 'Lifecycle - Alpha',
-  component: AlphaLabel,
+  title: 'Lifecycle',
+  component: Lifecycle,
 };
 
-export const Default = () => (
+export const AlphaDefault = () => (
   <>
-    This feature is in <AlphaLabel />
+    This feature is in <Lifecycle alpha />
   </>
 );
-export const Shorthand = () => (
+export const AlphaShorthand = () => (
   <>
-    This feature is in <AlphaLabel isShorthand />
+    This feature is in <Lifecycle alpha shorthand />
+  </>
+);
+export const BetaDefault = () => (
+  <>
+    This feature is in <Lifecycle />
+  </>
+);
+export const BetaShorthand = () => (
+  <>
+    This feature is in <Lifecycle shorthand />
   </>
 );

packages/core/src/components/Lifecycle/Lifecycle.test.jsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * 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 React from 'react';
+import { render } from '@testing-library/react';
+import { wrapInThemedTestApp } from '@backstage/test-utils';
+import { Lifecycle } from './Lifecycle';
+
+describe('<Lifecycle />', () => {
+  it('renders Alpha with shorthand', async () => {
+    const { getByText } = render(
+      wrapInThemedTestApp(<Lifecycle alpha shorthand />),
+    );
+    expect(getByText('α')).toBeInTheDocument();
+  });
+
+  it('renders Alpha without shorthand', async () => {
+    const { getByText } = render(wrapInThemedTestApp(<Lifecycle alpha />));
+    expect(getByText('Alpha')).toBeInTheDocument();
+  });
+
+  it('renders Beta with shorthand', async () => {
+    const { getByText } = render(wrapInThemedTestApp(<Lifecycle shorthand />));
+    expect(getByText('β')).toBeInTheDocument();
+  });
+
+  it('renders Beta without shorthand', async () => {
+    const { getByText } = render(wrapInThemedTestApp(<Lifecycle />));
+    expect(getByText('Beta')).toBeInTheDocument();
+  });
+});

packages/core/src/components/Lifecycle/Lifecycle.tsx

@@ -19,7 +19,8 @@ import CSS from 'csstype';
 import { makeStyles } from '@material-ui/core';
 
 type Props = CSS.Properties & {
-  isShorthand?: boolean;
+  shorthand?: boolean;
+  alpha?: boolean;
 };
 
 const useStyles = makeStyles({
@@ -37,26 +38,19 @@ const useStyles = makeStyles({
   },
 });
 
-export const AlphaLabel: FC<Props> = props => {
+export const Lifecycle: FC<Props> = props => {
   const classes = useStyles(props);
-  const { isShorthand } = props;
-  return isShorthand ? (
-    <span className={classes.alpha} style={{ fontSize: '120%' }}>
-      &alpha;
+  const { shorthand, alpha } = props;
+  return shorthand ? (
+    <span
+      className={classes[alpha ? 'alpha' : 'beta']}
+      style={{ fontSize: '120%' }}
+    >
+      {alpha ? <>&alpha;</> : <>&beta;</>}
     </span>
   ) : (
-    <span className={classes.alpha}>Alpha</span>
-  );
-};
-
-export const BetaLabel: FC<Props> = props => {
-  const classes = useStyles(props);
-  const { isShorthand } = props;
-  return isShorthand ? (
-    <span className={classes.beta} style={{ fontSize: '120%' }}>
-      &beta;
+    <span className={classes[alpha ? 'alpha' : 'beta']}>
+      {alpha ? 'Alpha' : 'Beta'}
     </span>
-  ) : (
-    <span className={classes.beta}>Beta</span>
   );
 };

packages/core/src/components/Lifecycle/LifecycleBeta.stories.tsx

@@ -1,33 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * 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 React from 'react';
-import { BetaLabel } from './Lifecycle';
-
-export default {
-  title: 'Lifecycle - Beta',
-  component: BetaLabel,
-};
-
-export const Default = () => (
-  <>
-    This feature is in <BetaLabel />
-  </>
-);
-export const Shorthand = () => (
-  <>
-    This feature is in <BetaLabel isShorthand />
-  </>
-);

packages/core/src/components/Lifecycle/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { AlphaLabel, BetaLabel } from './Lifecycle';
+export { Lifecycle } from './Lifecycle';

packages/core/src/index.ts

@@ -34,7 +34,7 @@ export { default as CopyTextButton } from './components/CopyTextButton';
 export { default as Progress } from './components/Progress';
 export * from './components/SimpleStepper';
 export { OAuthRequestDialog } from './components/OAuthRequestDialog';
-export { AlphaLabel, BetaLabel } from './components/Lifecycle';
+export { Lifecycle } from './components/Lifecycle';
 export { default as SupportButton } from './components/SupportButton';
 export { default as Table, SubvalueCell } from './components/Table';
 export type { TableColumn } from './components/Table/Table';

plugins/scaffolder/src/components/ScaffolderPage/index.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import {
-  AlphaLabel,
+  Lifecycle,
   Content,
   ContentHeader,
   InfoCard,
@@ -42,7 +42,7 @@ const ScaffolderPage: React.FC<{}> = () => {
       <Header
         title={
           <>
-            Create a new component <AlphaLabel isShorthand />{' '}
+            Create a new component <Lifecycle alpha shorthand />{' '}
           </>
         }
         subtitle="Create new software components using standard templates"