From 96034a8c65eaa20bc0470ebb1b252460fd6dda55 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Wed, 15 Jan 2025 22:29:50 +0000
Subject: [PATCH] Update all components names

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/components/Container/Container.tsx    | 12 ++--
 .../canon/src/components/Container/styles.css |  6 +-
 packages/canon/src/components/Grid/Grid.tsx   | 13 +---
 packages/canon/src/components/Grid/styles.css |  2 +-
 .../canon/src/components/Heading/Heading.tsx  | 17 +++--
 .../canon/src/components/Heading/styles.css   | 69 +++++++++----------
 .../canon/src/components/Heading/types.ts     |  2 +
 packages/canon/src/components/Icon/Icon.tsx   | 15 ++--
 packages/canon/src/components/Icon/styles.css | 16 +----
 packages/canon/src/components/Icon/types.ts   |  2 +
 .../canon/src/components/Inline/Inline.tsx    |  8 +--
 .../canon/src/components/Inline/styles.css    | 18 ++++-
 packages/canon/src/components/Stack/Stack.tsx |  8 +--
 .../canon/src/components/Stack/styles.css     | 18 ++++-
 .../canon/src/components/Table/styles.css     |  6 --
 packages/canon/src/components/Text/Text.tsx   | 12 ++--
 packages/canon/src/components/Text/styles.css | 58 ++++++++--------
 packages/canon/src/components/Text/types.ts   |  1 +
 packages/canon/src/css/core.css               |  4 --
 19 files changed, 152 insertions(+), 135 deletions(-)

diff --git a/packages/canon/src/components/Container/Container.tsx b/packages/canon/src/components/Container/Container.tsx
index bea7b4caf1..3583f8ba87 100644
--- a/packages/canon/src/components/Container/Container.tsx
+++ b/packages/canon/src/components/Container/Container.tsx
@@ -16,6 +16,7 @@
 import React, { forwardRef } from 'react';
 import { ContainerProps } from './types';
 import { getClassNames } from '../../utils/getClassNames';
+import clsx from 'clsx';
 
 /** @public */
 export const Container = forwardRef<HTMLDivElement, ContainerProps>(
@@ -25,13 +26,12 @@ export const Container = forwardRef<HTMLDivElement, ContainerProps>(
     // Generate utility class names
     const utilityClassNames = getClassNames(restProps);
 
-    // Combine the base class name, the sprinkles class name, and any additional class names
-    const classNames = ['canon-container', utilityClassNames, className]
-      .filter(Boolean)
-      .join(' ');
-
     return (
-      <div ref={ref} className={classNames} style={style}>
+      <div
+        ref={ref}
+        className={clsx('canon-Container', utilityClassNames, className)}
+        style={style}
+      >
         {children}
       </div>
     );
diff --git a/packages/canon/src/components/Container/styles.css b/packages/canon/src/components/Container/styles.css
index f3ebd64f52..7c7c323cb5 100644
--- a/packages/canon/src/components/Container/styles.css
+++ b/packages/canon/src/components/Container/styles.css
@@ -1,5 +1,5 @@
-.canon-container {
-  max-width: var(--canon-container-max-width);
+.canon-Container {
+  max-width: 75rem;
+  padding: 0 1rem;
   margin: 0 auto;
-  padding: 0 var(--canon-container-padding);
 }
diff --git a/packages/canon/src/components/Grid/Grid.tsx b/packages/canon/src/components/Grid/Grid.tsx
index 3799a70ae8..fc12695006 100644
--- a/packages/canon/src/components/Grid/Grid.tsx
+++ b/packages/canon/src/components/Grid/Grid.tsx
@@ -17,6 +17,7 @@
 import { createElement, forwardRef } from 'react';
 import { GridItemProps, GridProps } from './types';
 import { getClassNames } from '../../utils/getClassNames';
+import clsx from 'clsx';
 
 const GridBase = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
   const {
@@ -30,13 +31,9 @@ const GridBase = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
 
   const utilityClassNames = getClassNames({ gap, columns, ...restProps });
 
-  const classNames = ['canon-grid', utilityClassNames, className]
-    .filter(Boolean)
-    .join(' ');
-
   return createElement('div', {
     ref,
-    className: classNames,
+    className: clsx('canon-Grid', utilityClassNames, className),
     style,
     children,
   });
@@ -47,13 +44,9 @@ const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
 
   const utilityClassNames = getClassNames(restProps);
 
-  const classNames = ['grid-item', utilityClassNames, className]
-    .filter(Boolean)
-    .join(' ');
-
   return createElement('div', {
     ref,
-    className: classNames,
+    className: clsx('canon-GridItem', utilityClassNames, className),
     style,
     children,
   });
diff --git a/packages/canon/src/components/Grid/styles.css b/packages/canon/src/components/Grid/styles.css
index 8314f896bc..0bb9267795 100644
--- a/packages/canon/src/components/Grid/styles.css
+++ b/packages/canon/src/components/Grid/styles.css
@@ -1,3 +1,3 @@
-.canon-grid {
+.canon-Grid {
   display: grid;
 }
diff --git a/packages/canon/src/components/Heading/Heading.tsx b/packages/canon/src/components/Heading/Heading.tsx
index 1ac9f7d997..62c03fbef8 100644
--- a/packages/canon/src/components/Heading/Heading.tsx
+++ b/packages/canon/src/components/Heading/Heading.tsx
@@ -19,11 +19,18 @@
 import React, { forwardRef } from 'react';
 import { HeadingProps } from './types';
 import { useCanon } from '../../contexts/canon';
+import clsx from 'clsx';
 
 /** @public */
 export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
   (props, ref) => {
-    const { children, variant = 'title1', as = 'h1', ...restProps } = props;
+    const {
+      children,
+      variant = 'title1',
+      as = 'h1',
+      className,
+      ...restProps
+    } = props;
     const { getResponsiveValue } = useCanon();
 
     // Get the responsive value for the variant
@@ -40,10 +47,12 @@ export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
     return (
       <Component
         ref={ref}
+        className={clsx(
+          'canon-Heading',
+          responsiveVariant && `canon-Heading--variant-${responsiveVariant}`,
+          className,
+        )}
         {...restProps}
-        className={`text ${
-          responsiveVariant ? `text-${responsiveVariant}` : ''
-        }`}
       >
         {children}
       </Component>
diff --git a/packages/canon/src/components/Heading/styles.css b/packages/canon/src/components/Heading/styles.css
index 446a5b7d2b..122d8f4925 100644
--- a/packages/canon/src/components/Heading/styles.css
+++ b/packages/canon/src/components/Heading/styles.css
@@ -14,45 +14,40 @@
  * limitations under the License.
  */
 
-.text {
+.canon-Heading {
   font-family: var(--canon-font-regular);
   color: var(--canon-text-primary);
+  line-height: 100%;
   padding: 0;
   margin: 0;
-
-  &.text-display {
-    font-size: var(--canon-font-size-display);
-    line-height: 100%;
-    font-weight: var(--canon-font-weight-bold);
-  }
-
-  &.text-title1 {
-    font-size: var(--canon-font-size-title1);
-    line-height: 100%;
-    font-weight: var(--canon-font-weight-bold);
-  }
-
-  &.text-title2 {
-    font-size: var(--canon-font-size-title2);
-    line-height: 100%;
-    font-weight: var(--canon-font-weight-bold);
-  }
-
-  &.text-title3 {
-    font-size: var(--canon-font-size-title3);
-    line-height: 100%;
-    font-weight: var(--canon-font-weight-bold);
-  }
-
-  &.text-title4 {
-    font-size: var(--canon-font-size-title4);
-    line-height: 100%;
-    font-weight: var(--canon-font-weight-bold);
-  }
-
-  &.text-title5 {
-    font-size: var(--canon-font-size-title5);
-    line-height: 100%;
-    font-weight: var(--canon-font-weight-bold);
-  }
+}
+
+.canon-Heading--variant-display {
+  font-size: var(--canon-font-size-display);
+  font-weight: var(--canon-font-weight-bold);
+}
+
+.canon-Heading--variant-title1 {
+  font-size: var(--canon-font-size-title1);
+  font-weight: var(--canon-font-weight-bold);
+}
+
+.canon-Heading--variant-title2 {
+  font-size: var(--canon-font-size-title2);
+  font-weight: var(--canon-font-weight-bold);
+}
+
+.canon-Heading--variant-title3 {
+  font-size: var(--canon-font-size-title3);
+  font-weight: var(--canon-font-weight-bold);
+}
+
+.canon-Heading--variant-title4 {
+  font-size: var(--canon-font-size-title4);
+  font-weight: var(--canon-font-weight-bold);
+}
+
+.canon-Heading--variant-title5 {
+  font-size: var(--canon-font-size-title5);
+  font-weight: var(--canon-font-weight-bold);
 }
diff --git a/packages/canon/src/components/Heading/types.ts b/packages/canon/src/components/Heading/types.ts
index 7a9a44560c..6250e8d2eb 100644
--- a/packages/canon/src/components/Heading/types.ts
+++ b/packages/canon/src/components/Heading/types.ts
@@ -33,4 +33,6 @@ export interface HeadingProps {
         >
       >;
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  className?: string;
+  style?: React.CSSProperties;
 }
diff --git a/packages/canon/src/components/Icon/Icon.tsx b/packages/canon/src/components/Icon/Icon.tsx
index d4dbf601e3..610b3ae86e 100644
--- a/packages/canon/src/components/Icon/Icon.tsx
+++ b/packages/canon/src/components/Icon/Icon.tsx
@@ -19,18 +19,25 @@
 import React from 'react';
 import { useCanon } from '../../contexts/canon';
 import type { IconProps } from './types';
+import clsx from 'clsx';
 
 /** @public */
 export const Icon = (props: IconProps) => {
-  const { name, size = 16 } = props;
+  const { name, size = 16, className, style, ...restProps } = props;
   const { icons } = useCanon();
 
-  const RemixIcon = icons[name] as React.ComponentType<{ className?: string }>;
+  const CanonIcon = icons[name] as React.ComponentType<Omit<IconProps, 'name'>>;
 
-  if (!RemixIcon) {
+  if (!CanonIcon) {
     console.error(`Icon "${name}" not found or is not a valid component.`);
     return <svg />; // Return a default icon or handle the error appropriately
   }
 
-  return <RemixIcon className={`icon-${size}`} />;
+  return (
+    <CanonIcon
+      className={clsx('canon-Icon', className)}
+      style={{ width: size, height: size, ...style }}
+      {...restProps}
+    />
+  );
 };
diff --git a/packages/canon/src/components/Icon/styles.css b/packages/canon/src/components/Icon/styles.css
index 234105ed4e..49df1f4a21 100644
--- a/packages/canon/src/components/Icon/styles.css
+++ b/packages/canon/src/components/Icon/styles.css
@@ -14,17 +14,7 @@
  * limitations under the License.
  */
 
-.icon-12 {
-  width: 12px;
-  height: 12px;
-}
-
-.icon-16 {
-  width: 16px;
-  height: 16px;
-}
-
-.icon-24 {
-  width: 24px;
-  height: 24px;
+.canon-Icon {
+  width: 1rem;
+  height: 1rem;
 }
diff --git a/packages/canon/src/components/Icon/types.ts b/packages/canon/src/components/Icon/types.ts
index 57eddc74ba..91fc6b9e60 100644
--- a/packages/canon/src/components/Icon/types.ts
+++ b/packages/canon/src/components/Icon/types.ts
@@ -44,4 +44,6 @@ export type IconMap = Partial<Record<IconNames, React.ComponentType>>;
 export type IconProps = {
   name: IconNames;
   size?: number;
+  className?: string;
+  style?: React.CSSProperties;
 };
diff --git a/packages/canon/src/components/Inline/Inline.tsx b/packages/canon/src/components/Inline/Inline.tsx
index b3aaeaf082..599033996c 100644
--- a/packages/canon/src/components/Inline/Inline.tsx
+++ b/packages/canon/src/components/Inline/Inline.tsx
@@ -18,6 +18,7 @@ import { createElement, forwardRef } from 'react';
 import type { InlineProps } from './types';
 import { getClassNames } from '../../utils/getClassNames';
 import { JustifyContent, Breakpoint, AlignItems } from '../../types';
+import clsx from 'clsx';
 
 // Function to map align values
 const mapAlignValue = (value?: InlineProps['align']) => {
@@ -75,14 +76,9 @@ export const Inline = forwardRef<HTMLElement, InlineProps>((props, ref) => {
     ...restProps,
   });
 
-  // Combine the base class name, the sprinkles class name, and any additional class names
-  const classNames = ['canon-inline', utilityClassNames, className]
-    .filter(Boolean)
-    .join(' ');
-
   return createElement(as, {
     ref,
-    className: classNames,
+    className: clsx('canon-Inline', utilityClassNames, className),
     style,
     children,
   });
diff --git a/packages/canon/src/components/Inline/styles.css b/packages/canon/src/components/Inline/styles.css
index bafd29bf53..d68ee9dcbd 100644
--- a/packages/canon/src/components/Inline/styles.css
+++ b/packages/canon/src/components/Inline/styles.css
@@ -1,4 +1,20 @@
-.canon-inline {
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * 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.
+ */
+
+.canon-Inline {
   display: flex;
   flex-wrap: wrap;
 }
diff --git a/packages/canon/src/components/Stack/Stack.tsx b/packages/canon/src/components/Stack/Stack.tsx
index 522782daac..4b6a4596bb 100644
--- a/packages/canon/src/components/Stack/Stack.tsx
+++ b/packages/canon/src/components/Stack/Stack.tsx
@@ -18,6 +18,7 @@ import { createElement, forwardRef } from 'react';
 import { StackProps } from './types';
 import { getClassNames } from '../../utils/getClassNames';
 import type { AlignItems, Breakpoint } from '../../types';
+import clsx from 'clsx';
 
 // Function to map align values
 const mapAlignValue = (value?: StackProps['align']) => {
@@ -56,14 +57,9 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
     ...restProps,
   });
 
-  // Combine the base class name, the sprinkles class name, and any additional class names
-  const classNames = ['canon-stack', utilityClassNames, className]
-    .filter(Boolean)
-    .join(' ');
-
   return createElement(as, {
     ref,
-    className: classNames,
+    className: clsx('canon-Stack', utilityClassNames, className),
     style,
     children,
   });
diff --git a/packages/canon/src/components/Stack/styles.css b/packages/canon/src/components/Stack/styles.css
index fa5c3f7e5d..18886e3229 100644
--- a/packages/canon/src/components/Stack/styles.css
+++ b/packages/canon/src/components/Stack/styles.css
@@ -1,4 +1,20 @@
-.canon-stack {
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * 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.
+ */
+
+.canon-Stack {
   display: flex;
   flex-direction: column;
 }
diff --git a/packages/canon/src/components/Table/styles.css b/packages/canon/src/components/Table/styles.css
index 574fae67bf..cbc4d75ca5 100644
--- a/packages/canon/src/components/Table/styles.css
+++ b/packages/canon/src/components/Table/styles.css
@@ -16,12 +16,6 @@
   }
 }
 
-.table-header {
-  tr {
-    /* border-bottom: 1px solid var(--canon-border); */
-  }
-}
-
 .table-head {
   text-align: left;
   padding: var(--canon-spacing-xs);
diff --git a/packages/canon/src/components/Text/Text.tsx b/packages/canon/src/components/Text/Text.tsx
index dd0baf3f8e..08b99c3ff2 100644
--- a/packages/canon/src/components/Text/Text.tsx
+++ b/packages/canon/src/components/Text/Text.tsx
@@ -19,7 +19,7 @@
 import React, { forwardRef } from 'react';
 import { TextProps } from './types';
 import { useCanon } from '../../contexts/canon';
-
+import clsx from 'clsx';
 /** @public */
 export const Text = forwardRef<HTMLParagraphElement, TextProps>(
   (props, ref) => {
@@ -28,6 +28,7 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
       variant = 'body',
       weight = 'regular',
       style,
+      className,
       ...restProps
     } = props;
 
@@ -40,9 +41,12 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
     return (
       <p
         ref={ref}
-        className={`text ${
-          responsiveVariant ? `text-${responsiveVariant}` : ''
-        } ${responsiveWeight ? `text-${responsiveWeight}` : ''}`}
+        className={clsx(
+          'canon-Text',
+          responsiveVariant && `canon-Text--variant-${responsiveVariant}`,
+          responsiveWeight && `canon-Text--weight-${responsiveWeight}`,
+          className,
+        )}
         style={style}
         {...restProps}
       >
diff --git a/packages/canon/src/components/Text/styles.css b/packages/canon/src/components/Text/styles.css
index 9bf22ccab5..a338c6bca1 100644
--- a/packages/canon/src/components/Text/styles.css
+++ b/packages/canon/src/components/Text/styles.css
@@ -14,37 +14,37 @@
  * limitations under the License.
  */
 
-.text {
+.canon-Text {
   font-family: var(--canon-font-regular);
   color: var(--canon-text-primary);
   padding: 0;
   margin: 0;
-
-  &.text-body {
-    font-size: var(--canon-font-size-body);
-    line-height: 140%;
-  }
-
-  &.text-subtitle {
-    font-size: var(--canon-font-size-subtitle);
-    line-height: 140%;
-  }
-
-  &.text-caption {
-    font-size: var(--canon-font-size-caption);
-    line-height: 140%;
-  }
-
-  &.text-label {
-    font-size: var(--canon-font-size-label);
-    line-height: 140%;
-  }
-
-  &.text-regular {
-    font-weight: var(--canon-font-weight-regular);
-  }
-
-  &.text-bold {
-    font-weight: var(--canon-font-weight-bold);
-  }
+}
+
+.canon-Text--variant-body {
+  font-size: var(--canon-font-size-body);
+  line-height: 140%;
+}
+
+.canon-Text--variant-subtitle {
+  font-size: var(--canon-font-size-subtitle);
+  line-height: 140%;
+}
+
+.canon-Text--variant-caption {
+  font-size: var(--canon-font-size-caption);
+  line-height: 140%;
+}
+
+.canon-Text--variant-label {
+  font-size: var(--canon-font-size-label);
+  line-height: 140%;
+}
+
+.canon-Text--weight-regular {
+  font-weight: var(--canon-font-weight-regular);
+}
+
+.canon-Text--weight-bold {
+  font-weight: var(--canon-font-weight-bold);
 }
diff --git a/packages/canon/src/components/Text/types.ts b/packages/canon/src/components/Text/types.ts
index 7e11bed6e3..4fdc824120 100644
--- a/packages/canon/src/components/Text/types.ts
+++ b/packages/canon/src/components/Text/types.ts
@@ -27,5 +27,6 @@ export interface TextProps {
     | 'label'
     | Partial<Record<Breakpoint, 'subtitle' | 'body' | 'caption' | 'label'>>;
   weight?: 'regular' | 'bold' | Partial<Record<Breakpoint, 'regular' | 'bold'>>;
+  className?: string;
   style?: CSSProperties;
 }
diff --git a/packages/canon/src/css/core.css b/packages/canon/src/css/core.css
index b5008fb803..a520e40563 100644
--- a/packages/canon/src/css/core.css
+++ b/packages/canon/src/css/core.css
@@ -66,10 +66,6 @@
   --canon-border-radius-xl: 1.25rem; /* 20px */
   --canon-border-radius-2xl: 1.5rem; /* 24px */
 
-  /* Container */
-  --canon-container-max-width: 1200px;
-  --canon-container-padding: 1rem;
-
   /* Colors */
   --canon-accent: #000;
   --canon-background: #f8f8f8;