Feature/panel

packages/vanilla/src/components/panel/panel.md

@@ -0,0 +1,33 @@
+# Panel
+
+## Purpose
+
+A panel is a styled container for displaying information within the main page content area or to either side.
+
+## Functional Requirements
+
+* In addition to providing visual styles, panels may provide semantic meaning to the content areas they define.
+* Panels shall contain a heading tag (`h2-h6`) appropriate to the document outline.
+* The panel heading shall be styled in a consistent manner regardless of heading level.
+
+## Technical Specifications
+
+### User Interactions
+
+* All user interactions are governed by the content placed within the panel.
+
+### Responsiveness
+
+* Panels should not be given a fixed width larger than the smallest supported screen size.
+* In most cases, a panel's size is defined by its parent and/or a parent-level CSS Grid or Flexbox structure.
+
+### Accessibility
+
+* Panels should use appropriate HTML5 landmark tags for better accessibility rather than generic `div` tags. E.g., `aside` or  `section`.
+* A `section` remains generic unless given an `aria-label` or `aria-labelledby`, which then reads the section as a document landmark.
+* Panels shall contain a heading tag (`h2-h6`) appropriate to the document outline, which may be used to label the landmark.
+* Alternatively, if the visible text of the heading is not sufficiently descriptive or unique, an `aria-label` may be used directly on the landmark tag.
+
+### Usage Notes and Additional Considerations
+
+* Panels should not be confused with cards. If an interface uses multiple similarly formatted items, consider cards.

packages/vanilla/src/components/panel/panel.stories.js

@@ -0,0 +1,85 @@
+export default {
+  title: 'Patterns/Panel',
+  argTypes: {
+    tag: {
+      name: 'Semantic Tag',
+      description: 'The semantic tag defining the panel',
+      control: 'radio',
+      options: ['section', 'aside'],
+    },
+    headingLevel: {
+      name: 'Header Text',
+      description:
+        'The heading level used as the panel header (e.g., `h2`-`h6`) as appropriate for the document structure.',
+      control: 'select',
+      options: ['h2', 'h3', 'h4', 'h5', 'h6'],
+    },
+    header: {
+      name: 'Heading Text',
+      description: 'Text used as the panel header.',
+      control: 'text',
+    },
+    headerId: {
+      name: 'Heading ID',
+      description:
+        'The `id` of the heading tag used to label the wrapping landmark element via `aria-labelledby`. Specifying this `id` will override any `aria-label`.',
+      control: 'text',
+    },
+    content: {
+      name: 'Panel contents',
+      description:
+        'Placeholder text representing the panel contents, which can include HTML markup not supported in this story.',
+      control: 'text',
+    },
+    ariaLabel: {
+      name: 'ARIA Label',
+      description:
+        'An accessible label may be provided if the text within the header is not sufficiently descriptive or unique. In such a case, omit the heading `id`.',
+      control: 'text',
+    },
+    showIcon: {
+      name: 'Show Header Icon',
+      description:
+        'Show an icon in the panel header as an example. This icon could be swapped out for any other.',
+      control: 'boolean',
+    },
+  },
+};
+
+const PanelTemplate = ({tag, headingLevel, header, headerId, content, ariaLabel, showIcon}) =>
+  `
+    <${tag} class="cbp-panel"
+      ${headerId ? 'aria-labelledby="' + headerId + '"' : ''}
+      ${ariaLabel ? 'aria-label="' + ariaLabel + '"' : ''}
+    >
+      <div class="cbp-panel-header">
+        <${headingLevel}
+          ${headerId ? 'id="' + headerId + '"' : ''}
+        >${showIcon ? '<i class="fas fa-address-book cbp-margin-right-4x"></i>': ''}${header}
+        </${headingLevel}>
+      </div>
+      <div class="cbp-panel-content">
+        <p>${content}</p>
+      </div>
+    </${tag}>
+  `;
+
+export const Default = PanelTemplate.bind({});
+Default.args = {
+  tag: 'section',
+  headingLevel: 'h3',
+  header: 'Panel Header',
+  headerId: 'panelheader',
+  content: 'Panel Content',
+};
+Default.storyName = 'Default';
+
+export const Sidebar = PanelTemplate.bind({});
+Sidebar.args = {
+  tag: 'aside',
+  headingLevel: 'h3',
+  header: 'Sidebar Header',
+  headerId: 'panelheader',
+  content: 'Sidebar Content',
+};
+Sidebar.storyName = 'Sidebar';

packages/vanilla/src/sass/components/_index.scss

@@ -15,6 +15,7 @@
 @use 'modal';
 @use 'menu';
 @use './pagination';
+@use 'panel';
 @use 'radio';
 @use 'select';
 @use 'slider';

packages/vanilla/src/sass/components/_panel.scss

@@ -0,0 +1,34 @@
+.cbp-panel {
+  border-style: none;
+  border-radius: var(--cbp-border-radius-soft);
+
+  .cbp-panel-header {
+    color: var(--cbp-color-text-lighter);
+    background-color: var(--cbp-color-gray-cool-50);
+    padding: var(--cbp-space-5x);
+    border-bottom: solid 4px var(--cbp-color-gray-cool-60);
+    border-radius: var(--cbp-border-radius-soft) var(--cbp-border-radius-soft) 0 0;
+
+    & :where(h1,h2,h3,h4,h5,h6) {
+      color: inherit;
+      font-size: var(--cbp-font-size-heading-lg);
+      font-weight: normal;
+      line-height: var(--cbp-space-7x);
+    }
+  }
+
+  .cbp-panel-content {
+    background-color: var(--cbp-color-white);
+    padding: var(--cbp-space-5x);
+    border-style: solid;
+    border-color: var(--cbp-color-gray-cool-10);
+    border-width: var(--cbp-border-size-md);
+    border-top-style: none;
+    border-radius: 0 0 var(--cbp-border-radius-soft) var(--cbp-border-radius-soft);
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+}

packages/vanilla/src/sass/typography/_fonts.scss

@@ -49,75 +49,69 @@ h1,
   color: var(--cbp-color-text-darker);
   font-weight: 300; // light
   font-size: 2.027rem;
-  line-height: 36px;
-  letter-spacing: 0.12px;
+  line-height: var(--cbp-space-9x);
 }
 
 h2,
 .cbp-heading-xl {
   color: var(--cbp-color-text-darker);
   font-weight: 400; // regular
   font-size: 1.802rem;
-  line-height: 32px;
-  letter-spacing: 0.12px;
+  line-height: var(--cbp-space-8x);
 }
 
 h3,
 .cbp-heading-l {
   color: var(--cbp-color-text-darker);
   font-weight: 400; // regular
   font-size: 1.602rem;
-  line-height: 28px;
-  letter-spacing: 0.12px;
+  line-height: var(--cbp-space-7x);
 }
 
 h4,
 .cbp-heading-m {
   color: var(--cbp-color-text-darker);
   font-weight: 500; // medium
   font-size: 1.424rem;
-  line-height: 24px;
-  letter-spacing: 0.12px;
+  line-height: var(--cbp-space-6x);
 }
 
 h5,
 .cbp-heading-s {
   color: var(--cbp-color-text-darker);
   font-weight: 500; // medium
   font-size: 1.266rem;
-  line-height: 24px;
-  letter-spacing: 0.12px;
+  line-height: var(--cbp-space-6x);
 }
 
 h6,
 .cbp-heading-xs {
   color: var(--cbp-color-text-darker);
   font-weight: 700; // bold
   font-size: 1rem;
-  line-height: 20px;
-  letter-spacing: 0.12px;
+  line-height: var(--cbp-space-5x);
 }
 
 .cbp-text-masthead-1 {
   font-weight: 100;
   size: 2.566rem;
-  line-height: 44px;
+  line-height: var(--cbp-space-11x);
   letter-spacing: 0.12;
   color: var(--cbp-color-text-darker);
 }
 
 .cbp-text-masthead-2 {
   font-weight: 100;
   size: 2.281rem;
-  line-height: 40px;
+  line-height: var(--cbp-space-10x);
   letter-spacing: 0.12;
   color: var(--cbp-color-text-darker);
 }
 
 .cbp-text-subhead {
   font-size: 0.889rem;
   font-weight: 500;
-  line-height: 20px;
+  line-height: var(--cbp-space-5x);
   letter-spacing: 0.05em;
 }