@hubspot/cms-component-library 0.3.0 → 0.3.2

package/components/componentLibrary/Heading/stories/Heading.stories.tsx

@@ -1,88 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Heading from '../index.js';
-import { HeadingProps } from '../types.js';
-import { withHeadingStyles } from './HeadingDecorator.js';
-import { SBContainer } from '@sb-utils/SBContainer.js';
-
-const meta: Meta<HeadingProps> = {
-  title: 'Component Library/Heading',
-  component: Heading,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: `The Heading component provides a flexible and accessible way to render semantic HTML headings (h1-h6) with customizable visual styles through the displayAs prop.`,
-      },
-    },
-  },
-  decorators: [withHeadingStyles],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    headingLevel: 'h2',
-    children: 'A clear and bold heading',
-  },
-};
-
-export const AllHeadingLevels: Story = {
-  name: 'All Heading Levels',
-  render: () => (
-    <SBContainer flex direction="column" gap="large">
-      <SBContainer addBackground>
-        <p>
-          Each heading level has different semantic meaning and default styling
-        </p>
-        <Heading headingLevel="h1">Heading Level 1</Heading>
-        <Heading headingLevel="h2">Heading Level 2</Heading>
-        <Heading headingLevel="h3">Heading Level 3</Heading>
-        <Heading headingLevel="h4">Heading Level 4</Heading>
-        <Heading headingLevel="h5">Heading Level 5</Heading>
-        <Heading headingLevel="h6">Heading Level 6</Heading>
-      </SBContainer>
-    </SBContainer>
-  ),
-};
-
-export const TextAlignment: Story = {
-  name: 'Text Alignment',
-  render: () => (
-    <SBContainer flex direction="column" gap="large" minWidth="500px">
-      <SBContainer addBackground>
-        <Heading headingLevel="h2" textAlign="LEFT">
-          Left Aligned
-        </Heading>
-      </SBContainer>
-      <SBContainer addBackground>
-        <Heading headingLevel="h2" textAlign="CENTER">
-          Center Aligned
-        </Heading>
-      </SBContainer>
-      <SBContainer addBackground>
-        <Heading headingLevel="h2" textAlign="RIGHT">
-          Right Aligned
-        </Heading>
-      </SBContainer>
-    </SBContainer>
-  ),
-};
-
-export const LongText: Story = {
-  name: 'Long Text',
-  render: () => (
-    <SBContainer flex direction="column" gap="large" maxWidth="500px">
-      <SBContainer addBackground>
-        <h4>Long Heading Text</h4>
-        <p>Headings should handle long text gracefully</p>
-        <Heading headingLevel="h2">
-          This is a very long heading that demonstrates how the component
-          handles extensive text content that may wrap across multiple lines in
-          the layout
-        </Heading>
-      </SBContainer>
-    </SBContainer>
-  ),
-};

package/components/componentLibrary/Heading/stories/HeadingDecorator.module.scss

@@ -1,47 +0,0 @@
-.decoratorContainer {
-  padding: 20px;
-  --hscl-heading-h1-font: Arial, sans-serif;
-  --hscl-heading-h1-fontSize: 48px;
-  --hscl-heading-h1-fontStyle: normal;
-  --hscl-heading-h1-fontWeight: 700;
-  --hscl-heading-h2-font: Arial, sans-serif;
-  --hscl-heading-h2-fontSize: 36px;
-  --hscl-heading-h2-fontStyle: normal;
-  --hscl-heading-h2-fontWeight: 600;
-  --hscl-heading-h3-font: Arial, sans-serif;
-  --hscl-heading-h3-fontSize: 28px;
-  --hscl-heading-h3-fontStyle: normal;
-  --hscl-heading-h3-fontWeight: 600;
-  --hscl-heading-h4-font: Arial, sans-serif;
-  --hscl-heading-h4-fontSize: 24px;
-  --hscl-heading-h4-fontStyle: normal;
-  --hscl-heading-h4-fontWeight: 500;
-  --hscl-heading-h5-font: Arial, sans-serif;
-  --hscl-heading-h5-fontSize: 20px;
-  --hscl-heading-h5-fontStyle: normal;
-  --hscl-heading-h5-fontWeight: 500;
-  --hscl-heading-h6-font: Arial, sans-serif;
-  --hscl-heading-h6-fontSize: 16px;
-  --hscl-heading-h6-fontStyle: normal;
-  --hscl-heading-h6-fontWeight: 500;
-  --hscl-heading-display_1-font: Arial, sans-serif;
-  --hscl-heading-display_1-fontSize: 72px;
-  --hscl-heading-display_1-fontStyle: normal;
-  --hscl-heading-display_1-fontWeight: 800;
-  --hscl-heading-display_2-font: Arial, sans-serif;
-  --hscl-heading-display_2-fontSize: 60px;
-  --hscl-heading-display_2-fontStyle: normal;
-  --hscl-heading-display_2-fontWeight: 800;
-  --hscl-heading-lineHeight: 1.2;
-  --hscl-heading-margin: 0;
-  --hscl-heading-color: #2d3e50;
-}
-
-.decoratorContainer h1,
-.decoratorContainer h2,
-.decoratorContainer h3,
-.decoratorContainer h4,
-.decoratorContainer h5,
-.decoratorContainer h6 {
-  margin-bottom: 1rem;
-}

package/components/componentLibrary/Heading/stories/HeadingDecorator.tsx

@@ -1,8 +0,0 @@
-import type { Decorator } from '@storybook/react';
-import styles from './HeadingDecorator.module.scss';
-
-export const withHeadingStyles: Decorator = Story => (
-  <div className={styles.decoratorContainer}>
-    <Story />
-  </div>
-);

package/components/componentLibrary/Heading/types.ts

@@ -1,35 +0,0 @@
-import {
-  AlignmentFieldDefaults,
-  TextFieldDefaults,
-} from '@hubspot/cms-components/fields';
-
-export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-
-export type DisplayAs = HeadingLevel | 'display_1' | 'display_2';
-
-export type HeadingProps = {
-  headingLevel: HeadingLevel;
-  displayAs?: DisplayAs;
-  textAlign?: (typeof AlignmentFieldDefaults)['horizontal_align'];
-  className?: string;
-  style?: React.CSSProperties;
-  children?: React.ReactNode;
-};
-
-export type ContentFieldsProps = {
-  headingTextLabel?: string;
-  headingTextName?: string;
-  headingTextDefault?: typeof TextFieldDefaults;
-  headingLevelLabel?: string;
-  headingLevelName?: string;
-  headingLevelDefault?: HeadingLevel;
-};
-
-export type StyleFieldsProps = {
-  textAlignLabel?: string;
-  textAlignName?: string;
-  textAlignDefault?: (typeof AlignmentFieldDefaults)['horizontal_align'];
-  displayAsLabel?: string;
-  displayAsName?: string;
-  displayAsDefault?: DisplayAs;
-};