Refactor/wsdev 5068 section spacing

CHANGELOG.mdx

@@ -17,6 +17,100 @@ Prefix the change with one of these keywords:
 
 ## [Unreleased]
 
+### Breaking
+
+#### Layout components
+
+- Refactor `Column` layout component:
+  - add: class for component margin-y-sm
+  - deprecate: `maxWidth` prop
+  - deprecate: `gridGap` prop
+  - deprecate: `reverse` prop
+- Refactor `ImageCover` layout component:
+  - add: class for breakout width
+  - add: class for primary spacing
+  - change: imported `styles.css`
+  - deprecate: `as` prop
+- Refactor `Main` layout component:
+  - add: `maxWidth` prop
+  - add: `noProse` prop
+  - add: class for primary spacing
+  - add: section markup to return to manage children width
+- Refactor `Section` layout component:
+  - add: class for breakout width
+  - add: class for primary spacing
+  - add: classes for sub component spacing-y
+  - deprecated: `proseType` prop
+- Refactor `WideWave` layout component:
+  - add: class for breakout width
+  - add: class for primary spacing
+  - change: imported `styles.css`
+  - deprecate: `as` prop
+  - deprecate: `hasRaven` prop
+
+#### Content components
+
+- Refactor `Embed` component:
+  - deprecate: `maxWidth` prop
+- Refactor `FullBanner` component:
+  - add: class for breakout width
+  - change: imported `styles.css`
+  - deprecate: `as` prop
+- Refactor `Nav` component:
+  - deprecate: `navType` prop,
+  - added: `Nav.Top`
+  - renamed: `Nav.Aside` to `Nav.Buttons`
+  - renamed: `Nav.Secondary` to `Nav.Bottom`
+- Refactor `Placeholder` component:
+  - deprecate: `maxWidth` prop
+- Refactor `PageHeader` component:
+  - deprecate: `Events` sub component
+  - deprecate: `People` sub component
+- Refactor `TextMedia` component:
+  - add: class for component margin-y
+  - deprecate: `maxWidth` prop
+  - deprecate: `gridGap` prop
+  - deprecate: imported `styles.css`
+- Refactor `TextMedia.Content` component:
+  - add: first-last margin class
+- Refactor `TextMedia.Aside` component:
+  - add: `hasBorder` prop
+  - deprecate: `border` prop
+  - deprecate: `borderColor` prop
+- Refactor `TextMedia.BgImg` component:
+  - add: `hasBorder` prop
+  - deprecate: `border` prop
+- Refactor `WideImage` component:
+  - deprecate: `as` prop
+  - deprecate: `maxWidth` prop
+
+### Added
+
+- `Details`: new component to list details for people, events and more
+- `Embed`: `isRound` prop that adds rounded-xl class
+- `ImageCaptionOverlay`: reusable caption for `ImageGrid` and `ImageSlider`
+- `Pagination`: added margin-y-0 on li elements
+- `SocialIcons`: new component to display social icons
+- `Form.FieldControl`: isLoading and isError props to manage field states
+- `FormLoader`: noMargin prop to remove spacing
+- `Video Banner`: manual controls
+
+### Changed
+
+- `Alert`: reduced lg text prop size
+- `Figure`: alignment and width prop classes
+- `Figure`: replaced primary div wrapper with `Figure` component
+- `Login`: change top margin to fit logo inside container
+- `Modal`: removed section wrapper, updated close button styles
+- `Table`: remove duplicate `cu-table` class
+
+### Fixed
+
+- `Form`: style of all inputs and `InputAddon`
+- `Nav`: navigation and priority plus work properly with any LinkProvider
+- `StackedList`: Removed gap in dividing lines in listings
+- `Form.Autosuggest`: Option's type to accept any key value pair
+
 ### Added
 
 - Manual control to video banner

LICENSE

@@ -1,21 +1,16 @@
-MIT License
+Raven Design System License
 
-Copyright (c) 2022 Web Services
+Copyright (c) 2025 Carleton University
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+Permission is hereby granted, free of charge, to any staff member of Carleton University obtaining a copy of this software and associated documentation files (the "Software"), to use the Software solely for internal purposes, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+1. The Software may not be used, copied, modified, merged, published, distributed, sublicensed, or sold, in whole or in part, without the express written permission of Carleton University.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+2. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+3. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+For permission requests, please contact:
+
+Department of University Communications
+Carleton University

cypress/support/component.ts

@@ -19,7 +19,7 @@ import './commands'
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-import { mount } from 'cypress/react18'
+import { mount } from '@cypress/react'
 import '../../lib/style.css'
 
 // Augment the Cypress namespace to include type definitions for

eslint.config.mjs

@@ -0,0 +1,55 @@
+import react from 'eslint-plugin-react'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import typescriptEslint from '@typescript-eslint/eslint-plugin'
+import typescriptParser from '@typescript-eslint/parser'
+import prettier from 'eslint-plugin-prettier'
+import storybook from 'eslint-plugin-storybook'
+import eslintConfigPrettier from 'eslint-config-prettier'
+import pluginCypress from 'eslint-plugin-cypress/flat'
+
+const config = [
+  ...storybook.configs['flat/recommended'],
+  pluginCypress.configs.recommended,
+  eslintConfigPrettier,
+  {
+    ignores: ['dist/**', 'node_modules/**', 'public/**'],
+    files: ['lib/**/*.ts', 'lib/**/*.tsx', 'lib/**/*.cy.ts', 'lib/**/*.cy.tsx'],
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+      '@typescript-eslint': typescriptEslint,
+      prettier,
+      cypress: pluginCypress,
+    },
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        React: 'writable',
+        JSX: 'writable',
+      },
+    },
+    rules: {
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': 'error',
+      'no-undef': 'error',
+      '@typescript-eslint/no-explicit-any': 'error',
+      'prettier/prettier': 'error',
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+      'cypress/unsafe-to-chain-command': 'error',
+    },
+  },
+]
+
+export default config

lib/components/Alert/Alert.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Meta, StoryObj } from '@storybook/react'
-import { Section } from '../../layouts/Section/Section'
+import { Main } from '../../layouts/Main/Main'
 import { Alert } from './Alert'
 
 const meta: Meta<typeof Alert> = {
@@ -26,23 +26,9 @@ export const Primary: Story = {
   },
   render: (args) => {
     return (
-      <Section>
+      <Main>
         <Alert {...args} />
-      </Section>
-    )
-  },
-}
-
-export const TwoColumns: Story = {
-  args: {
-    ...Primary.args,
-    size: 'lg',
-  },
-  render: (args) => {
-    return (
-      <Section>
-        <Alert {...args} />
-      </Section>
+      </Main>
     )
   },
 }

lib/components/Alert/Alert.tsx

@@ -24,7 +24,7 @@ export const Alert = ({ title, content, type = 'success', size = 'sm' }: PropsWi
       alertIconSize: 'w-8 h-8',
     },
     lg: {
-      alertTitleSize: 'text-base md:text-2xl mt-1',
+      alertTitleSize: 'text-base md:text-xl mt-1',
       alertIconSize: 'w-10 h-10',
     },
   }
@@ -37,7 +37,7 @@ export const Alert = ({ title, content, type = 'success', size = 'sm' }: PropsWi
   }
 
   return (
-    <div className={`cu-alert cu-alert--${type} cu-component not-prose flex rounded-md p-4`}>
+    <div className={`cu-alert cu-alert--${type} not-prose flex rounded-md p-4`}>
       {React.createElement(AlertTypes[type], {
         className: `${AlertSizes[size].alertIconSize}`,
         'aria-hidden': 'true',

lib/components/Alert/Examples.stories.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Section } from '../../layouts/Section/Section'
+import { Main } from '../../layouts/Main/Main'
+import { FooterStandard } from '../Footer/FooterStandard/FooterStandard'
+import { Nav } from '../Nav/Nav'
+import { NavButtonsData } from '../../data/NavData'
+import { Alert } from './Alert'
+
+const meta: Meta = {
+  title: 'Components/Alert/Examples',
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+export default meta
+type Story = StoryObj
+
+const SinglePara = () => {
+  return (
+    <>
+      <p>
+        Nobis voluptatem dolorum et eum doloremque cupiditate velit. Praesentium architecto a distinctio aut
+        reprehenderit ducimus. Perferendis excepturi delectus nihil voluptatem non. Molestiae quas dolores accusamus in.
+        Praesent quis ligula quis nulla malesuada tempor.
+      </p>
+    </>
+  )
+}
+
+export const LayoutExamples: Story = {
+  render: () => (
+    <>
+      <Nav>
+        <Nav.Top>
+          <Nav.Logo title="Raven Design System" link="/" />
+          <Nav.Aside>
+            <Nav.Buttons menu={NavButtonsData} />
+          </Nav.Aside>
+        </Nav.Top>
+      </Nav>
+
+      <Main maxWidth="5xl">
+        <Section maxWidth="7xl">
+          <Alert content="Records have been updated." size="lg" title="Alert title" type="success" />
+        </Section>
+
+        <h2>Header Two</h2>
+        <SinglePara />
+        <SinglePara />
+
+        <Alert content="Records may not have been updated." size="md" title="Alert title" type="warning" />
+        <Alert content="Records have not been updated." size="md" title="Alert title" type="error" />
+
+        <SinglePara />
+        <h2>Header Two</h2>
+        <SinglePara />
+        <SinglePara />
+
+        <Alert content="Records may not have been updated." size="sm" title="Alert title" type="warning" />
+
+        <Section maxWidth="7xl">
+          <Alert content="Records have been updated." size="lg" title="Alert title" type="success" />
+        </Section>
+
+        <h2>Header Two</h2>
+        <SinglePara />
+        <SinglePara />
+
+        <Alert content="Records can be updated." size="lg" title="Alert title" type="info" />
+      </Main>
+
+      <FooterStandard />
+    </>
+  ),
+}