chore: #244 deprecating current status indicator

src/components/status-indicator/__styles__/index.ts → src/components/deprecated-status-indicator/__styles__/index.ts

@@ -10,9 +10,15 @@ import {
   elIntentNeutral,
 } from '../../../styles/intent'
 
-export const elShapeTag = css``
+/**
+ * @deprecated
+ */
+export const elDeprecatedShapeTag = css``
 
-export const ElStatusIndicator = styled.span`
+/**
+ * @deprecated
+ */
+export const ElDeprecatedStatusIndicator = styled.span`
   border-radius: 3rem;
   display: inline-block;
   width: 0.75rem;
@@ -56,7 +62,7 @@ export const ElStatusIndicator = styled.span`
     outline-color: var(--intent-default-dark);
   }
 
-  &.${elShapeTag} {
+  &.${elDeprecatedShapeTag} {
     border-radius: 1rem 0.2rem 0.2rem 1rem;
     height: 2rem;
     width: 0.5rem;

src/components/deprecated-status-indicator/__tests__/__snapshots__/status-indicator.test.tsx.snap

@@ -0,0 +1,65 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DeprecatedStatusIndicator component > should match a snapshot 1`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-primary el-deprecated-status-indicator"
+  />
+</DocumentFragment>
+`;
+
+exports[`DeprecatedStatusIndicator component > should match a snapshot 2`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-primary el-deprecated-status-indicator"
+  />
+</DocumentFragment>
+`;
+
+exports[`DeprecatedStatusIndicator component > should match a snapshot 3`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-pending el-deprecated-status-indicator"
+  />
+</DocumentFragment>
+`;
+
+exports[`DeprecatedStatusIndicator component > should match a snapshot 4`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-danger el-deprecated-status-indicator"
+  />
+</DocumentFragment>
+`;
+
+exports[`DeprecatedStatusIndicator component > should match a snapshot 5`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-success el-deprecated-status-indicator"
+  />
+</DocumentFragment>
+`;
+
+exports[`DeprecatedStatusIndicator component > should match a snapshot 6`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-warning el-deprecated-status-indicator"
+  />
+</DocumentFragment>
+`;
+
+exports[`DeprecatedStatusIndicator component > should match a snapshot 7`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-neutral el-deprecated-status-indicator"
+  />
+</DocumentFragment>
+`;
+
+exports[`DeprecatedStatusIndicator component > should match a snapshot 8`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-default el-deprecated-status-indicator"
+  />
+</DocumentFragment>
+`;

src/components/status-indicator/__tests__/status-indicator.test.tsx → src/components/deprecated-status-indicator/__tests__/status-indicator.test.tsx

@@ -1,44 +1,44 @@
 import { render } from '@testing-library/react'
-import { StatusIndicator } from '..'
+import { DeprecatedStatusIndicator } from '..'
 
-describe('StatusIndicator component', () => {
+describe('DeprecatedStatusIndicator component', () => {
   it('should match a snapshot', () => {
-    const wrapper = render(<StatusIndicator />)
+    const wrapper = render(<DeprecatedStatusIndicator />)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot', () => {
-    const wrapper = render(<StatusIndicator intent="primary" />)
+    const wrapper = render(<DeprecatedStatusIndicator intent="primary" />)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot', () => {
-    const wrapper = render(<StatusIndicator intent="pending" />)
+    const wrapper = render(<DeprecatedStatusIndicator intent="pending" />)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot', () => {
-    const wrapper = render(<StatusIndicator intent="danger" />)
+    const wrapper = render(<DeprecatedStatusIndicator intent="danger" />)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot', () => {
-    const wrapper = render(<StatusIndicator intent="success" />)
+    const wrapper = render(<DeprecatedStatusIndicator intent="success" />)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot', () => {
-    const wrapper = render(<StatusIndicator intent="warning" />)
+    const wrapper = render(<DeprecatedStatusIndicator intent="warning" />)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot', () => {
-    const wrapper = render(<StatusIndicator intent="neutral" />)
+    const wrapper = render(<DeprecatedStatusIndicator intent="neutral" />)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot', () => {
-    const wrapper = render(<StatusIndicator intent="default" />)
+    const wrapper = render(<DeprecatedStatusIndicator intent="default" />)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 })

src/components/deprecated-status-indicator/status-indicator.mdx

@@ -0,0 +1,45 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { DeprecatedStatusIndicator } from '.'
+import { RenderHtmlMarkup } from '../../storybook/render-html-markup'
+import * as DeprecatedStatusIndicatorStories from './status-indicator.stories'
+
+<Meta of={DeprecatedStatusIndicatorStories} />
+
+# Deprecated Status Indicator
+
+A small coloured circle indicator to provide quick visual reference to the status of something; be it an action, response or anything else.
+
+Props available for the React version of the component;
+
+<Controls />
+
+## Basic usage
+
+<Canvas of={DeprecatedStatusIndicatorStories.BasicUsage} />
+
+<RenderHtmlMarkup of={DeprecatedStatusIndicatorStories.BasicUsage} />
+
+## Intent
+
+Different intents are supported, to enable buttons to be used in different contexts
+
+<Canvas of={DeprecatedStatusIndicatorStories.IntentPrimary} />
+<RenderHtmlMarkup of={DeprecatedStatusIndicatorStories.IntentPrimary} />
+
+<Canvas of={DeprecatedStatusIndicatorStories.IntentNeutral} />
+<RenderHtmlMarkup of={DeprecatedStatusIndicatorStories.IntentNeutral} />
+
+<Canvas of={DeprecatedStatusIndicatorStories.IntentSuccess} />
+<RenderHtmlMarkup of={DeprecatedStatusIndicatorStories.IntentSuccess} />
+
+<Canvas of={DeprecatedStatusIndicatorStories.IntentPending} />
+<RenderHtmlMarkup of={DeprecatedStatusIndicatorStories.IntentPending} />
+
+<Canvas of={DeprecatedStatusIndicatorStories.IntentWarning} />
+<RenderHtmlMarkup of={DeprecatedStatusIndicatorStories.IntentWarning} />
+
+<Canvas of={DeprecatedStatusIndicatorStories.IntentDanger} />
+<RenderHtmlMarkup of={DeprecatedStatusIndicatorStories.IntentDanger} />
+
+<Canvas of={DeprecatedStatusIndicatorStories.IntentDefault} />
+<RenderHtmlMarkup of={DeprecatedStatusIndicatorStories.IntentDefault} />

src/components/status-indicator/status-indicator.stories.tsx → src/components/deprecated-status-indicator/status-indicator.stories.tsx

@@ -1,14 +1,14 @@
-import { StatusIndicator } from '.'
+import { DeprecatedStatusIndicator } from '.'
 
 export default {
-  title: 'StatusIndicator',
-  component: StatusIndicator,
+  title: 'DeprecatedStatusIndicator',
+  component: DeprecatedStatusIndicator,
 }
 
 export const BasicUsage = {
   render: ({}) => (
     <div>
-      <StatusIndicator />
+      <DeprecatedStatusIndicator />
       Something is happening
     </div>
   ),
@@ -19,7 +19,7 @@ export const BasicUsage = {
 export const IntentPrimary = {
   render: ({}) => (
     <div>
-      <StatusIndicator intent="primary" />
+      <DeprecatedStatusIndicator intent="primary" />
       Primary
     </div>
   ),
@@ -30,7 +30,7 @@ export const IntentPrimary = {
 export const IntentNeutral = {
   render: ({}) => (
     <div>
-      <StatusIndicator intent="neutral" />
+      <DeprecatedStatusIndicator intent="neutral" />
       Neutral
     </div>
   ),
@@ -41,7 +41,7 @@ export const IntentNeutral = {
 export const IntentSuccess = {
   render: ({}) => (
     <div>
-      <StatusIndicator intent="success" />
+      <DeprecatedStatusIndicator intent="success" />
       Success
     </div>
   ),
@@ -52,7 +52,7 @@ export const IntentSuccess = {
 export const IntentPending = {
   render: ({}) => (
     <div>
-      <StatusIndicator intent="pending" />
+      <DeprecatedStatusIndicator intent="pending" />
       Pending
     </div>
   ),
@@ -63,7 +63,7 @@ export const IntentPending = {
 export const IntentWarning = {
   render: ({}) => (
     <div>
-      <StatusIndicator intent="warning" />
+      <DeprecatedStatusIndicator intent="warning" />
       Warning
     </div>
   ),
@@ -74,7 +74,7 @@ export const IntentWarning = {
 export const IntentDanger = {
   render: ({}) => (
     <div>
-      <StatusIndicator intent="danger" />
+      <DeprecatedStatusIndicator intent="danger" />
       Danger
     </div>
   ),
@@ -85,7 +85,7 @@ export const IntentDanger = {
 export const IntentDefault = {
   render: ({}) => (
     <div>
-      <StatusIndicator intent="default" />
+      <DeprecatedStatusIndicator intent="default" />
       Default
     </div>
   ),

src/components/deprecated-status-indicator/status-indicator.tsx

@@ -0,0 +1,29 @@
+import React, { FC, HTMLAttributes } from 'react'
+import { cx } from '@linaria/core'
+import { elDeprecatedShapeTag, ElDeprecatedStatusIndicator } from './__styles__'
+import { Intent, getIntentClassName } from '../../helpers/intent'
+
+/**
+ * replaced with StatusIndicatorProps
+ * @deprecated
+ */
+export interface DeprecatedStatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
+  intent?: Intent
+  shape?: 'circle' | 'tag'
+}
+
+/**
+ * replaced with StatusIndicator
+ * @deprecated
+ */
+export const DeprecatedStatusIndicator: FC<DeprecatedStatusIndicatorProps> = ({
+  intent = 'primary',
+  shape,
+  className,
+  ...rest
+}) => (
+  <ElDeprecatedStatusIndicator
+    className={cx(intent && getIntentClassName(intent), shape && shape === 'tag' && elDeprecatedShapeTag, className)}
+    {...rest}
+  />
+)

src/components/deprecated-table/table.stories.tsx

@@ -15,7 +15,7 @@ import { Icon } from '../icon'
 import { elSpan2, elSpan3 } from '../grid'
 import { InputGroup } from '../input-group'
 import { Button, DeprecatedButtonGroup } from '../button'
-import { StatusIndicator } from '../status-indicator'
+import { DeprecatedStatusIndicator } from '../deprecated-status-indicator'
 import { elMlAuto } from '../../styles/spacing'
 import { FormLayout, InputWrap } from '../form-layout'
 import { elIsActive } from '../../styles/states'
@@ -152,7 +152,7 @@ export const BasicCustomisationTableCells = {
             £50.00
           </DeprecatedTableCell>
           <DeprecatedTableCell narrowLabel="Status">
-            <StatusIndicator intent="pending" />
+            <DeprecatedStatusIndicator intent="pending" />
             Pending
           </DeprecatedTableCell>
         </DeprecatedTableRow>
@@ -191,7 +191,7 @@ export const ExpandingTableCellSpace = {
             £50.00
           </DeprecatedTableCell>
           <DeprecatedTableCell narrowLabel="Status">
-            <StatusIndicator intent="pending" />
+            <DeprecatedStatusIndicator intent="pending" />
             Pending
           </DeprecatedTableCell>
         </DeprecatedTableRow>
@@ -234,7 +234,7 @@ export const ExpandableContent = {
             £50.00
           </DeprecatedTableCell>
           <DeprecatedTableCell narrowLabel="Status">
-            <StatusIndicator intent="pending" />
+            <DeprecatedStatusIndicator intent="pending" />
             Pending
           </DeprecatedTableCell>
           <TableExpandableRowTriggerCell isOpen />
@@ -293,7 +293,7 @@ export const CallToActionContent = {
             £50.00
           </DeprecatedTableCell>
           <DeprecatedTableCell narrowLabel="Status">
-            <StatusIndicator intent="pending" />
+            <DeprecatedStatusIndicator intent="pending" />
             Pending
           </DeprecatedTableCell>
           <TableCtaTriggerCell icon="fileDownload" />
@@ -400,7 +400,7 @@ export const ReactShorthandUsage = {
 
             children: (
               <>
-                <StatusIndicator intent="pending" />
+                <DeprecatedStatusIndicator intent="pending" />
                 Pending
               </>
             ),
@@ -532,7 +532,7 @@ export const AdvancedCustomisationReact = {
 
             children: (
               <>
-                <StatusIndicator intent="pending" />
+                <DeprecatedStatusIndicator intent="pending" />
                 Pending
               </>
             ),