Add Heading component

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
2024-12-15 09:37:19 +00:00
parent f7a16565a3
commit 942ecc8078
5 changed files with 197 additions and 0 deletions
@@ -0,0 +1,42 @@
+/*
+ * 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 { Heading } from './Heading';
+
+const meta = {
+  title: 'Components/Heading',
+  component: Heading,
+} satisfies Meta<typeof Heading>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Heading',
+  },
+};
+
+export const Responsive: Story = {
+  args: {
+    ...Default.args,
+    variant: {
+      // xs: 'title4',
+      sm: 'display',
+    },
+  },
+};
@@ -0,0 +1,45 @@
+/*
+ * 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 { HeadingProps } from './types';
+import { useTheme } from '../../theme/context';
+import { getResponsiveValue } from '../../utils/getResponsiveValue';
+
+export const Heading = forwardRef<HTMLParagraphElement, HeadingProps>(
+  (props, ref) => {
+    const { children, variant = 'title1', ...restProps } = props;
+    const { breakpoint } = useTheme();
+    const responsiveVariant = getResponsiveValue(variant, breakpoint);
+
+    console.log(breakpoint);
+    console.log(responsiveVariant);
+
+    return (
+      <p
+        ref={ref}
+        {...restProps}
+        className={`text ${
+          responsiveVariant ? `text-${responsiveVariant}` : ''
+        }`}
+      >
+        {children}
+      </p>
+    );
+  },
+);
+
+Heading.displayName = 'Heading';
@@ -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 { Heading } from './Heading';
+export type { HeadingProps } from './types';
@@ -0,0 +1,57 @@
+/*
+ * 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-display {
+    font-size: var(--canon-font-size-display);
+    line-height: 100%;
+    font-weight: var(--canon-font-bold);
+  }
+
+  &.text-title1 {
+    font-size: var(--canon-font-size-title1);
+    line-height: 100%;
+    font-weight: var(--canon-font-bold);
+  }
+
+  &.text-title2 {
+    font-size: var(--canon-font-size-title2);
+    line-height: 100%;
+    font-weight: var(--canon-font-bold);
+  }
+
+  &.text-title3 {
+    font-size: var(--canon-font-size-title3);
+    line-height: 100%;
+    font-weight: var(--canon-font-bold);
+  }
+
+  &.text-title4 {
+    font-size: var(--canon-font-size-title4);
+    line-height: 100%;
+    font-weight: var(--canon-font-bold);
+  }
+
+  &.text-title5 {
+    font-size: var(--canon-font-size-title5);
+    line-height: 100%;
+    font-weight: var(--canon-font-bold);
+  }
+}
@@ -0,0 +1,35 @@
+/*
+ * 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 { Breakpoint } from '../../layout/types';
+
+/** @public */
+export interface HeadingProps {
+  children: React.ReactNode;
+  variant?:
+    | 'display'
+    | 'title1'
+    | 'title2'
+    | 'title3'
+    | 'title4'
+    | 'title5'
+    | Partial<
+        Record<
+          Breakpoint,
+          'display' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5'
+        >
+      >;
+}