Adding the new Text component

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/docs/components/Text/Text.tsx

@@ -24,7 +24,7 @@ export const Text = ({
   style?: React.CSSProperties;
 }) => {
   return (
-    <div className="text" style={style}>
+    <div className="sb-text" style={style}>
       {children}
     </div>
   );

packages/canon/docs/components/Text/styles.css

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.text {
+.sb-text {
   font-family: 'Geist', sans-serif;
   font-size: 16px;
   line-height: 28px;

packages/canon/docs/components/Title/Title.tsx

@@ -31,7 +31,7 @@ export const Title = ({
   if (type === 'h3') Component = 'h3';
 
   return React.createElement(Component, {
-    className: `title ${type}`,
+    className: `sb-title ${type}`,
     style,
     children,
   });

packages/canon/docs/components/Title/styles.css

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.title {
+.sb-title {
   font-family: 'Geist', sans-serif;
   margin: 0;
   font-weight: 500;

packages/canon/src/components/Text/Text.stories.tsx

@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Text } from './Text';
+
+const meta = {
+  title: 'Components/Text',
+  component: Text,
+} satisfies Meta<typeof Text>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children:
+      ' Lorem ipsum dolor sit amet consectetur. Nec arcu vel lacus magna adipiscing nisi mauris tortor viverra. Enim rhoncus quisque consectetur ligula diam ac lacus massa. Id interdum id pellentesque justo ut massa nibh amet. Odio massa in scelerisque tortor massa integer purus amet enim. Eros sit neque nullam facilisis. Purus massa dignissim aliquet purus eu in. Urna consequat ullamcorper arcu amet dictumst. Commodo praesent turpis fringilla tristique congue volutpat in. Nulla in nulla ultrices lacus. In ultrices id tellus ut. Semper duis in in non proin et pulvinar. Sit amet vulputate lorem sit ipsum quis amet pulvinar ultricies. Imperdiet enim molestie habitant eget. Aenean mollis aenean dolor sodales tempus blandit.',
+  },
+};

packages/canon/src/components/Text/Text.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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.
+ */
+
+import React, { forwardRef } from 'react';
+import { TextProps } from './types';
+
+export const Text = forwardRef<HTMLParagraphElement, TextProps>(
+  (props, ref) => {
+    const {
+      children,
+      variant = 'body',
+      weight = 'regular',
+      ...restProps
+    } = props;
+
+    return (
+      <p
+        ref={ref}
+        {...restProps}
+        className={`text ${variant ? `text-${variant}` : ''} ${
+          weight ? `text-${weight}` : ''
+        }`}
+      >
+        {children}
+      </p>
+    );
+  },
+);
+
+Text.displayName = 'Text';

packages/canon/src/components/Text/index.ts

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+export { Text } from './Text';
+export type { TextProps } from './types';

packages/canon/src/components/Text/styles.css

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+.text {
+  font-family: var(--canon-font-regular);
+  padding: 0;
+  margin: 0;
+
+  &.text-body {
+    font-size: var(--canon-font-size-body);
+    line-height: 140%;
+  }
+}

packages/canon/src/components/Text/types.ts

@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+/** @public */
+export interface TextProps {
+  children: React.ReactNode;
+  variant?: 'subtitle' | 'body' | 'caption' | 'label';
+  weight?: 'regular' | 'bold';
+}

packages/canon/src/css/components.css

@@ -23,3 +23,4 @@
 @import '../components/Icon/styles.css';
 @import '../components/Checkbox/styles.css';
 @import '../components/Table/styles.css';
+@import '../components/Text/styles.css';

packages/canon/src/css/core.css

@@ -17,6 +17,12 @@
 /* Normalize */
 @import './normalize.css';
 
+*,
+html,
+body {
+  font-family: var(--canon-font-regular);
+}
+
 /* Light theme tokens */
 :root {
   /* Colors */
@@ -91,12 +97,6 @@
   /* Container */
   --canon-container-max-width: 1200px;
   --canon-container-padding: 1rem;
-
-  *,
-  html,
-  body {
-    font-family: var(--canon-font-regular);
-  }
 }
 
 /* Dark theme tokens */