feat: add header and page components

Author: anitavincent

packages/components/src/header/header.css

@@ -0,0 +1,8 @@
+@layer sl-components {
+  [data-sl-header] {
+    font: var(--sl-text-display-1-font);
+    letter-spacing: var(--sl-text-display-1-letter-spacing);
+
+    border-bottom: var(--sl-border);
+  }
+}

packages/components/src/header/header.tsx

@@ -0,0 +1,18 @@
+
+import React, { forwardRef } from 'react'
+import { Content, ContentProps } from '../content'
+import './header.css'
+
+export const Header = forwardRef<HTMLDivElement, HeaderProps>(
+  function Header(props, ref) {
+    const { children, ...otherProps } = props
+
+    return (
+      <Content data-sl-header {...otherProps} ref={ref}>
+          {children}
+      </Content>
+    )
+  }
+)
+
+export type HeaderProps = ContentProps

packages/components/src/header/index.ts

@@ -0,0 +1 @@
+export * from './header'

packages/components/src/header/stories/header.stories.tsx

@@ -0,0 +1,41 @@
+import '../header.css'
+import './styles.css'
+import React from 'react'
+
+import { Header } from '../index'
+import { Container, Content } from '../../content'
+import { Page } from '../../page'
+
+export default {
+  title: 'shoreline-components/header',
+}
+
+export function Default() {
+  return (
+    <Container>
+      <Header>Header</Header>
+    </Container>
+  )
+}
+
+export function WithPage() {
+  return (
+    <Page>
+      <Header narrow>Header</Header>
+      <Content narrow className="page-content">
+        <div className="generic-content">Page content</div>
+      </Content>
+    </Page>
+  )
+}
+
+export function OnComponent() {
+  return (
+    <Container>
+      <div className="card-like-component">
+        <Header>Component header</Header>
+        <Content>Text</Content>
+      </div>
+    </Container>
+  )
+}

packages/components/src/header/stories/styles.css

@@ -0,0 +1,16 @@
+.page-content {
+  flex-grow: 1;
+}
+
+.generic-content {
+  height: 100%;
+  width: 100%;
+  background-color: var(--sl-bg-muted);
+}
+
+.card-like-component {
+  border: var(--sl-border);
+  border-radius: var(--sl-border-radius-medium);
+  height: 15rem;
+  margin: 1rem;
+}

packages/components/src/header/tests/header.vitest.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { describe, expect, test } from 'vitest'
+import { render } from '@testing-library/react'
+
+import { Header } from '../header'
+
+describe('header', () => {
+  test('renders', () => {
+    const { container } = render(<Header />)
+
+    expect(container.querySelector('[data-sl-header]')).toBeInTheDocument()
+  })
+})
+

packages/components/src/index.ts

@@ -1,4 +1,6 @@
 /* PLOP_INJECT_EXPORT */
+export * from './header'
+export * from './page'
 export * from './toast'
 export * from './skeleton'
 export * from './tab'

packages/components/src/page/index.ts

@@ -0,0 +1 @@
+export * from './page'

packages/components/src/page/page.css

@@ -0,0 +1,7 @@
+@layer sl-components {
+  [data-sl-page] {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+}

packages/components/src/page/page.tsx

@@ -0,0 +1,19 @@
+import React, { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { Container } from '../content'
+
+export const Page = forwardRef<HTMLDivElement, PageProps>(function Page(
+  props,
+  ref
+) {
+  const { children, ...otherProps } = props
+
+  return (
+    <Container data-sl-page ref={ref} {...otherProps}>
+      {children}
+    </Container>
+  )
+})
+
+export interface PageProps extends ComponentPropsWithoutRef<'div'> {
+  className?: string
+}

packages/components/src/page/stories/page.stories.tsx

@@ -0,0 +1,33 @@
+import '../page.css'
+import './styles.css'
+import React from 'react'
+
+import { Page } from '../index'
+import { Content } from '../../content'
+import { Header } from '../../header'
+
+export default {
+  title: 'shoreline-components/page',
+}
+
+export function Default() {
+  return (
+    <Page>
+      <Header>Header</Header>
+      <Content className="page-content">
+        <div className="page-inner-content">Page content</div>
+      </Content>
+    </Page>
+  )
+}
+
+export function Narrow() {
+  return (
+    <Page>
+      <Header narrow>Header</Header>
+      <Content narrow className="page-content">
+        <div className="page-inner-content">Page content</div>
+      </Content>
+    </Page>
+  )
+}

packages/components/src/page/stories/styles.css

@@ -0,0 +1,9 @@
+.page-content {
+  flex-grow: 1;
+}
+
+.page-inner-content {
+  height: 100%;
+  width: 100%;
+  background-color: var(--sl-bg-muted);
+}

packages/components/src/page/tests/page.vitest.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { describe, expect, test } from 'vitest'
+import { render } from '@testing-library/react'
+
+import { Page } from '../page'
+
+describe('page', () => {
+  test('renders', () => {
+    const { container } = render(<Page />)
+
+    expect(container.querySelector('[data-sl-page]')).toBeInTheDocument()
+  })
+})
+