Merge pull request #1624 from dequelabs/release-v6.5.0

chore(cauldron): Release 6.5.0

CHANGELOG.md

@@ -2,6 +2,29 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [6.5.0](https://github.com/dequelabs/cauldron/compare/v6.4.2...v6.5.0) (2024-08-07)
+
+
+### Features
+
+* added prop to hide\show first\last pages for `Pagination` ([#1616](https://github.com/dequelabs/cauldron/issues/1616)) ([eb0a056](https://github.com/dequelabs/cauldron/commit/eb0a056f127f7712727e0d9e38a09468742ca271))
+* **react:** `ImpactBadge` component ([#1612](https://github.com/dequelabs/cauldron/issues/1612)) ([53ae3d0](https://github.com/dequelabs/cauldron/commit/53ae3d05aeb1b6263b33faf44c576ced7c814608))
+* **react:** add Button tertiary variant ([#1592](https://github.com/dequelabs/cauldron/issues/1592)) ([40759db](https://github.com/dequelabs/cauldron/commit/40759dba9c0e1431ada465eac4d6cf9b155cc6dd))
+* **react:** add IconButton tertiary variant ([#1598](https://github.com/dequelabs/cauldron/issues/1598)) ([c0101d7](https://github.com/dequelabs/cauldron/commit/c0101d733714387bd5931d64ea854115fa1d5c07))
+* **react:** added badge component ([#1610](https://github.com/dequelabs/cauldron/issues/1610)) ([37be24a](https://github.com/dequelabs/cauldron/commit/37be24aa45d75248bb11bdc3ad8408c15b0c3096))
+* **react:** fix show prop and add defaultShow prop ([#1606](https://github.com/dequelabs/cauldron/issues/1606)) ([f1f0163](https://github.com/dequelabs/cauldron/commit/f1f016388543360dc6a525037d583dc3b8f72835))
+* **styles:** added new typography system ([#1584](https://github.com/dequelabs/cauldron/issues/1584)) ([41dad21](https://github.com/dequelabs/cauldron/commit/41dad212a92bef7e31ce446835984110b85b2c29))
+* **styles:** adjust button typography and text sizes ([#1596](https://github.com/dequelabs/cauldron/issues/1596)) ([31c9c18](https://github.com/dequelabs/cauldron/commit/31c9c18a2b6a023b3134fe4b9e41d797ed9481b9))
+* **styles:** flag DefinitionButton as a deprecated class ([#1593](https://github.com/dequelabs/cauldron/issues/1593)) ([2657ce8](https://github.com/dequelabs/cauldron/commit/2657ce8bab2446496b82d65f1f16e13dee257b26))
+
+
+### Bug Fixes
+
+* **Button:** fix missing border for tertiary buttons in dark mode ([#1611](https://github.com/dequelabs/cauldron/issues/1611)) ([256641b](https://github.com/dequelabs/cauldron/commit/256641b5883108529152d2a299088dcc6f7ef146))
+* **react:** Dialog closes instead of contained tooltip on escape key ([#1594](https://github.com/dequelabs/cauldron/issues/1594)) ([a3f374a](https://github.com/dequelabs/cauldron/commit/a3f374a622ff1aace2cb9bba19a9a793ddfadb6e))
+* **styles:** synced breadcrumb with design ([#1600](https://github.com/dequelabs/cauldron/issues/1600)) ([f51057b](https://github.com/dequelabs/cauldron/commit/f51057b7e9f32b459ee2181c8edb7d7b6500cdd1))
+* synced `Notice` component with design ([#1605](https://github.com/dequelabs/cauldron/issues/1605)) ([9eab948](https://github.com/dequelabs/cauldron/commit/9eab948b599b57a6bae4e637536012d6d8d54146))
+
 ### [6.4.2](https://github.com/dequelabs/cauldron/compare/v6.4.1...v6.4.2) (2024-07-10)
 
 

CONTRIBUTING.md

@@ -3,6 +3,8 @@
 1. [Getting Started](#getting-started)
    - [Discussing Proprietary Features](#discussing-proprietary-features)
    - [Setup](#setup)
+1. [Adding New Components](#adding-new-components)
+   - [Process for New Components](#process-for-new-components) 
 1. [Developing Components](#developing-components)
    - [Tools Used](#tools-used)
    - [Structure](#structure)
@@ -19,7 +21,7 @@
 1. [Breaking Changes](#breaking-changes)
    - [Components](#components)
    - [Styles](#styles)
-   - [Deprecating](#deprectating)
+   - [Deprecating](#deprecating)
    - [Removal](#removal)
 
 ## Getting Started
@@ -36,6 +38,53 @@ This is a public repo, so care needs to be taken to not include details or scree
 
 Local development setup is documented in [this project's readme](./README.md#development)
 
+## Adding New Components
+
+One of Cauldron's primary goals is to provide high quality, stable, reusable components. This process is intentially slow because it is a critical front-end infrastructure of Deque's products.
+
+As such, components that land in Cauldron tend to have several, if not all of the following qualities:
+
+- Likely to be used more than once
+- Solves a single problem particularly well
+- Provides a similar interface to established Cauldron components
+- Does not rely on product specific dependencies or patterns
+- Does not contain side effects (like data fetching)
+- A single pattern that is replacing multiple existing patterns within products
+- Upstreaming an existing common shared pattern that exists in products
+
+There is a natural friction between the speed at which Cauldron moves as a design system, and how products need to quickly iterate and release new features. We want to strike a balance between avoiding "junk" in our design system, but still allowing for Deque products to develop without Cauldron being a bottleneck.
+
+### Process for New Components
+
+For a new component to be added to Cauldron, the below workflow describes the desired process for a new Component:
+
+<details>
+   <summary>Workflow chart describing process and steps to getting a component added to Cauldron</summary>
+
+   ![workflow chart describing process and steps to getting a component added to Cauldron](./docs/assets/img/new-component-workflow.png)
+
+</details>
+
+<details>
+  <summary>Long description for the above flow chart</summary>
+
+1. Does a component already exist in Cauldron? If yes, go to 2. If no, go to 3.
+2. Does it fully support your use case? If yes, the component is ready to use. If no, continue:
+    - Create an RFC to make changes to Cauldron
+    - A technical and design review is performed by the Cauldron team
+    - Continue to 6.
+3. Does a similar component already exist in Cauldron? If yes, go to 2. If no, go to 4.
+4. Does something similar exist for shared product ui? If yes, go to 8. If no, go to 5.
+5. Is this a general use pattern? If yes, complete steps under 2. If no, go to 7. If you're unsure, have a conversation with the Cauldron team to help determine general use and repeat this step.
+6. Was the RFC accepted? If no, build component in shared product ui. If yes, continue:
+    - Team submits PR(s) to Cauldron according to the accepted proposal
+    - A new release of Cauldron is cut
+    - Component is ready to use
+7. Can the pattern be made more general use? If yes, go to 9. If no, build the pattern as a one-off pattern.
+8. Does it fully support your use case? If yes, use existing shared product ui component. If no, build component in shared product ui.
+9. Does the pattern depend on propietary information? If yes, build component in shared product ui (launchpad). If no, complete steps under 2.
+</details>
+
 ## Developing Components
 
 General [component guidelines](https://cauldron.dequelabs.com/component-guidelines) and [style guidelines](https://cauldron.dequelabs.com/style-guidelines) live within our documentation.

docs/pages/components/Badge.mdx

@@ -0,0 +1,69 @@
+---
+title: Badge
+description: Badge is a container component intended to present content with an optional leading icon with a text label.
+source: https://github.com/dequelabs/cauldron/tree/develop/packages/react/src/components/Badge/index.tsx
+---
+
+import { Badge, BadgeLabel, Icon } from '@deque/cauldron-react';
+
+```js
+import { Badge, BadgeLabel, Icon } from '@deque/cauldron-react';
+```
+
+## Example
+
+### Default
+
+```jsx example
+<Badge>Value</Badge>
+```
+
+### Badge with Label
+
+```jsx example
+<Badge>
+  <BadgeLabel>Label:</BadgeLabel>
+  value
+</Badge>
+```
+
+### Small size
+
+```jsx example
+<Badge size="small">
+  <BadgeLabel>Label:</BadgeLabel>
+  value
+</Badge>
+```
+
+### Badge with icon
+
+```jsx example
+<Badge>
+  <Icon type="chevron-double-up" />
+  <BadgeLabel>Label:</BadgeLabel>
+  value
+</Badge>
+```
+
+## Props
+
+### Badge
+
+<ComponentProps
+  children={true}
+  className={true}
+  refType="HTMLDivElement"
+  props={[
+    {
+      name: 'size',
+      type: ['default', 'small'],
+      defaultValue: 'default',
+      description: 'Visual style of the tag.'
+    }
+  ]}
+/>
+
+### BadgeLabel
+
+<ComponentProps children={true} className={true} refType="HTMLDivElement" />

docs/pages/components/Button.mdx

@@ -28,6 +28,14 @@ Secondary buttons are used for actions that are not the primary action.
 <Button variant="secondary">Secondary</Button>
 ```
 
+### Tertiary
+
+Tertiary buttons are an alternate style of button with less visual prominence than primary or secondary actions.
+
+```jsx example
+<Button variant="tertiary">Tertiary</Button>
+```
+
 ### Error
 
 Error buttons are used to indicate potentially dangerous actions.
@@ -90,7 +98,7 @@ When you need a semantic button with the visual appearance of a link.
   props={[
     {
       name: 'variant',
-      type: ['primary', 'secondary', 'error', 'link', 'tag'],
+      type: ['primary', 'secondary', 'tertiary', 'error', 'link', 'tag'],
       defaultValue: 'primary',
       description: 'Visual style of the button.'
     },

docs/pages/components/IconButton.mdx

@@ -30,6 +30,16 @@ Primary icon buttons are used to indicate a primary action.
 <IconButton variant="primary" icon="pencil" label="Edit" disabled />
 ```
 
+### Tertiary
+
+Tertiary buttons are an alternate style of button with less visual prominence than primary or secondary actions.
+
+```jsx example
+<IconButton variant="tertiary" icon="pencil" label="Edit" />
+<IconButton variant="tertiary" icon="pencil" label="Edit" disabled />
+```
+
+
 ### Error
 
 Error buttons are used to indicate potentially dangerous actions.
@@ -75,6 +85,8 @@ If there are multiple icon buttons with the same label, the visible label text c
 <IconButton variant="secondary" icon="pencil" label="Edit" disabled large />
 <IconButton variant="primary" icon="pencil" label="Edit" large />
 <IconButton variant="primary" icon="pencil" label="Edit" disabled large />
+<IconButton variant="tertiary" icon="pencil" label="Edit" large />
+<IconButton variant="tertiary" icon="pencil" label="Edit" disabled large />
 ```
 
 ## Props
@@ -96,7 +108,7 @@ If there are multiple icon buttons with the same label, the visible label text c
     },
     {
       name: 'variant',
-      type: ['primary', 'secondary', 'error'],
+      type: ['primary', 'secondary', 'tertiary', 'error'],
       defaultValue: 'secondary',
       description: 'Visual style of the IconButton.'
     },

docs/pages/components/ImpactBadge.mdx

@@ -0,0 +1,71 @@
+---
+title: ImpactBadge
+description: The ImpactBadge is an extension of the Badge component is designed to indicate the type of impact
+source: https://github.com/dequelabs/cauldron/tree/develop/packages/react/src/components/ImpactBadge/index.tsx
+---
+
+import { ImpactBadge } from '@deque/cauldron-react';
+
+```js
+import { ImpactBadge } from '@deque/cauldron-react';
+```
+
+## Example
+
+### Critical
+
+```jsx example
+<ImpactBadge type="critical" />
+```
+
+### Serious
+
+```jsx example
+<ImpactBadge type="serious" />
+```
+
+### Moderate
+
+```jsx example
+<ImpactBadge type="moderate" />
+```
+
+### Minor
+
+```jsx example
+<ImpactBadge type="minor" />
+```
+
+### Small size
+```jsx example
+<ImpactBadge type="minor" size="small" />
+```
+
+## Props
+
+### ImpactBadge
+
+<ComponentProps
+  className={true}
+  refType="HTMLDivElement"
+  props={[
+    {
+      name: 'type',
+      type: ['critical', 'serious', 'moderate', 'minor'],
+      description: 'Variant of impact level',
+      required: true
+    },
+    {
+      name: 'size',
+      type: ['default', 'small'],
+      defaultValue: 'default',
+      description: 'Visual style of the tag.'
+    },
+    {
+      name: 'label',
+      type: 'ContentNode',
+      required: false,
+      description: 'Label for the ImpactBadge element.'
+    },
+  ]}
+/>

docs/pages/components/Notice.mdx

@@ -19,9 +19,9 @@ or anywhere else in the DOM without needing to be absolutely/statically position
 
 ## Examples
 
-There are two variants of the `Notice` component: `info` and `caution`. The `info` variant is used to display general
-information, while the `caution` variant is used to display a warning. Depending on the variant, the background color
-and icon will change (can be overwritten).
+The Notice component supports three types: info, caution, and danger. The info type is used to display general
+information, while the caution type is used to display a warning, and the danger type is used to display critical warnings. 
+Depending on the type, the background color and icon will change (can be overwritten).
 
 ### Info
 
@@ -112,6 +112,50 @@ function DismissableNotice() {
 }
 ```
 
+## Variants
+
+The Notice component includes a variant prop that allows for two display styles: default and condensed. 
+The default variant displays the notice with a larger padding and a two-column layout, 
+while the condensed variant uses smaller padding and a single-column layout.
+
+### Default
+
+The default variant displays the notice with a larger padding and a two-column layout.
+
+```jsx example
+<Notice variant="default" type="info" title="Information">
+  Forem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero
+  et velit interdum, ac aliquet odio mattis.
+  <ul>
+    <li>List item</li>
+    <li>List item</li>
+    <li>List item</li>
+    <li>List item</li>
+    <li>List item</li>
+  </ul>
+  <Button variant="link">Dismiss</Button>
+</Notice>
+```
+
+### Condensed
+
+The condensed variant of the Notice component uses smaller padding and a single-column layout.
+
+```jsx example
+<Notice variant="condensed" type="info" title="Information">
+  Forem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero
+  et velit interdum, ac aliquet odio mattis.
+  <ul>
+    <li>List item</li>
+    <li>List item</li>
+    <li>List item</li>
+    <li>List item</li>
+    <li>List item</li>
+  </ul>
+  <Button variant="link">Dismiss</Button>
+</Notice>
+```
+
 ## Props
 
 <ComponentProps
@@ -142,6 +186,13 @@ function DismissableNotice() {
       type: ['IconType', 'string'],
       description:
         'Icon name - by default automatically set to either "info-circle" or "caution" Cauldron icons'
+    },
+    {
+      name: 'variant',
+      type: ['default', 'condensed'],
+      defaultValue: 'default',
+      description:
+        'Controls the layout and padding of the Notice component. "default" uses a larger padding and a two-column layout, while "condensed" uses smaller padding and a single-column layout.'
     }
   ]}
   refType="HTMLDivElement"