Docs--guidelines-spacing v2 and releases (#1752)

* Update color blocks to purple * Merge branch 'main' of https://github.com/carbon-design-system/carbon-for-ibm-dotcom-website into Docs--content-block-v2 * Remove percentage margin from v9 * Update src/data/components.json Co-authored-by: Olivia Flory <[email protected]> * Update src/pages/components/content-block.mdx Co-authored-by: Olivia Flory <[email protected]> * Update src/pages/components/content-block.mdx Co-authored-by: Olivia Flory <[email protected]> * Update src/pages/components/content-block.mdx Co-authored-by: Olivia Flory <[email protected]> * Update src/pages/components/content-block.mdx Co-authored-by: Olivia Flory <[email protected]> * Update src/pages/components/content-block.mdx Co-authored-by: Olivia Flory <[email protected]> * Update src/pages/components/content-block.mdx Co-authored-by: Olivia Flory <[email protected]> * Written content update * Images * Content pages updated w spacing tables * Content component table * Update margin image * Update src/pages/guidelines/spacing.mdx Co-authored-by: Olivia Flory <[email protected]> * Update src/pages/guidelines/spacing.mdx Co-authored-by: Olivia Flory <[email protected]> * Update src/pages/guidelines/spacing.mdx Co-authored-by: Olivia Flory <[email protected]> * Update src/pages/guidelines/spacing.mdx Co-authored-by: Olivia Flory <[email protected]> * updated purple arrow image * Update expressive styling links * diff link * link * fix giant CTA reference * Update src/pages/components/content-block.mdx Co-authored-by: kennylam <[email protected]> * Update src/pages/about-carbon-for-ibm.com/releases.mdx Co-authored-by: kennylam <[email protected]> * Update src/pages/about-carbon-for-ibm.com/releases.mdx Co-authored-by: kennylam <[email protected]> * update v11 language --------- Co-authored-by: Olivia Flory <[email protected]> Co-authored-by: kennylam <[email protected]>
carbon-design-system · Feb 19, 2024 · 274b431 · 274b431
1 parent a903a4a
commit 274b431
Show file tree

Hide file tree

Showing 18 changed files with 202 additions and 81 deletions.
diff --git a/src/images/guidelines/spacing/guidelines-spacing-content-components-01.png b/src/images/guidelines/spacing/guidelines-spacing-content-components-01.png
diff --git a/src/images/guidelines/spacing/guidelines-spacing-example-01.png b/src/images/guidelines/spacing/guidelines-spacing-example-01.png
diff --git a/src/images/guidelines/spacing/guidelines-spacing-example-02.png b/src/images/guidelines/spacing/guidelines-spacing-example-02.png
diff --git a/src/images/guidelines/spacing/guidelines-spacing-responsive-spacing-01.png b/src/images/guidelines/spacing/guidelines-spacing-responsive-spacing-01.png
diff --git a/src/images/guidelines/spacing/guidelines-spacing-responsive-spacing-02.png b/src/images/guidelines/spacing/guidelines-spacing-responsive-spacing-02.png
diff --git a/src/images/guidelines/spacing/guidelines-spacing-spacing-concepts-01.png b/src/images/guidelines/spacing/guidelines-spacing-spacing-concepts-01.png
diff --git a/src/images/guidelines/spacing/guidelines-spacing-spacing-concepts-02.png b/src/images/guidelines/spacing/guidelines-spacing-spacing-concepts-02.png
diff --git a/src/images/guidelines/spacing/guidelines-spacing-spacing-value-01.png b/src/images/guidelines/spacing/guidelines-spacing-spacing-value-01.png
diff --git a/src/images/guidelines/spacing/guidelines-spacing-spacing-value-02.png b/src/images/guidelines/spacing/guidelines-spacing-spacing-value-02.png
diff --git a/src/images/guidelines/spacing/spacing-example-01.jpg b/src/images/guidelines/spacing/spacing-example-01.jpg
diff --git a/src/images/guidelines/spacing/spacing-example-02.jpg b/src/images/guidelines/spacing/spacing-example-02.jpg
diff --git a/src/pages/about-carbon-for-ibm.com/releases.mdx b/src/pages/about-carbon-for-ibm.com/releases.mdx
@@ -13,11 +13,9 @@ Learn about our latest updates, our release history, and what the team has plann
 
 Each Carbon for IBM.com release includes package releases that are independently versioned following the industry-standard semantic versioning specification.
 
-The Carbon for IBM.com team also ships package minor releases every other week and when necessary, patch releases between minor versions to address bugs. 
+Carbon for IBM.com follows a bi-weekly release schedule, with patch releases when necessary.
 
-### Carbon for IBM.com v2
-
-Carbon for IBM.com focuses on implimenting Carbon Design System v11. Along with simplifying our content authoring and number of pre-constructed components, adding flexibility to our content components, and accessibility improvements. 
+A primary focus of Carbon for IBM.com is always using the latest version of the Carbon Design System. This allows simplifying our content authoring and number of pre-constructed components, adding flexibility to our content components, and accessibility improvements.
 
 <Row className="resource-card-group">
   <Column colMd={4} colLg={4} noGutterSm>
@@ -50,7 +48,7 @@ Carbon for IBM.com focuses on implimenting Carbon Design System v11. Along with
 
 ### Carbon for IBM.com v1
 
-Carbon for IBM.com v1 implemented Carbon Design System v10 and our newly-updated brand expression (IBM Design Language) into our components. 
+Carbon for IBM.com v1 implemented Carbon Design System v10 and our newly-updated brand expression (IBM Design Language) into our components.
 
 <Row className="resource-card-group">
   <Column colMd={4} colLg={4} noGutterSm>

diff --git a/src/pages/components/content-block.mdx b/src/pages/components/content-block.mdx
@@ -16,6 +16,7 @@ import ResourceLinks from 'components/ResourceLinks';
 <AnchorLink>Behaviors</AnchorLink>
 <AnchorLink>Gallery</AnchorLink>
 <AnchorLink>Resources</AnchorLink>
+<AnchorLink>Spacing</AnchorLink>
 <AnchorLink>Content guidance</AnchorLink>
 <AnchorLink>Related components</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
@@ -34,12 +35,17 @@ The content block acts as the heading level two on pages after the lead space co
 
 ![Anatomy image of the content block](../../images/component/content-block/content-block-anatomy.png)
 
-1. **Content block heading:** An optional, customizable heading for the content block.
-2. **Sub heading:** An optional, customizable sub heading for the content block.
+1. **Content block heading:** An optional, customizable heading for the content section.
+2. **Sub heading:** An optional, customizable sub heading for the content section.
 3. **Copy:** An optional short description.
 4. **Child container:** Insert additional components to enhance the narrative, such as content group, content item or card group.
-5. **CTA:** Use this as a general call to action, typically used to encompass the entire content block.
-6. **Border:** An optional bottom border.
+5. **CTA:** Use this as a general call to action, typically used to encompass the entire content section.
+6. **Content block heading:** An optional, customizable heading for the content block.
+7. **Sub heading:** An optional, customizable sub heading for the content block.
+8. **Copy:** An optional short description.
+9. **Child container:** Insert additional components to enhance the narrative, such as content group, content item or card group.
+10. **CTA:** Use this as a general call to action, typically used to encompass the entire content block.
+11. **Border:** An optional bottom border.
 
 ### Usage
 
@@ -72,7 +78,6 @@ Content block is often paired with the [content section](../components/content-s
 
 ## Modifiers
 
-
 ### Children
 
 Similar to the content section, the content block can accept child components which allows designers and authors maximum flexibility when creating page layouts. The most common layouts on IBM.com are 8 column and 12 column components.
@@ -170,6 +175,16 @@ The content block is one of the main layout components for designing pages of th
 
 <ResourceLinks name="Content block" type="layout" />
 
+### Spacing
+
+| Breakpoint                   | `max`              | `xlg`              | `lg`               | `md`              | `sm`              |
+| ---------------------------- | ------------------ | ------------------ | ------------------ | ----------------- | ----------------- |
+| Margin top                   | `spacing-10` 64px  | `spacing-10` 64px  | `spacing-10` 64px  | `spacing-07` 32px | `spacing-07` 32px |
+| Margin bottom with border    | `spacing-10` 64px  | `spacing-10` 64px  | `spacing-10` 64px  | `spacing-07` 32px | `spacing-07` 32px |
+| Margin bottom without border | `spacing-10` 160px | `spacing-10` 160px | `spacing-10` 160px | `spacing-10` 64px | `spacing-10` 64px |
+
+For more information, see the [spacing guidelines](../guidelines/spacing)
+
 ## Content guidance
 
 | Element                                                    | Content type | Required | Instances | Character limit <br/>(English / translated) | Notes                                                                                        |

diff --git a/src/pages/components/content-group.mdx b/src/pages/components/content-group.mdx
@@ -18,6 +18,7 @@ import ResourceLinks from 'components/ResourceLinks';
 <AnchorLink>Behaviors</AnchorLink>
 <AnchorLink>Tips and techniques</AnchorLink>
 <AnchorLink>Resources</AnchorLink>
+<AnchorLink>Spacing</AnchorLink>
 <AnchorLink>Content guidance</AnchorLink>
 <AnchorLink>Related components</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
@@ -80,6 +81,15 @@ Content group can contain multiple [content items](../components/content-item) a
 
 <ResourceLinks name="Content group" type="layout" />
 
+### Spacing
+
+| Breakpoint    | `max`             | `xlg`             | `lg`              | `md`              | `sm`              |
+| ------------- | ----------------- | ----------------- | ----------------- | ----------------- | ----------------- |
+| Margin top    | `spacing-07` 32px | `spacing-07` 32px | `spacing-07` 32px | `spacing-07` 32px | `spacing-07` 32px |
+| Margin bottom | `spacing-09` 48px | `spacing-09` 48px | `spacing-09` 48px | `spacing-09` 48px | `spacing-07` 32px |
+
+For more information, see the [spacing guidelines](../guidelines/spacing)
+
 ## Content guidance
 
 | Element                                                    | Content type | Required | Instances | Character limit <br/>(English / translated) | Notes                                                                               |

diff --git a/src/pages/components/content-item.mdx b/src/pages/components/content-item.mdx
@@ -17,6 +17,7 @@ import ResourceLinks from 'components/ResourceLinks';
 <AnchorLink>Modifiers</AnchorLink>
 <AnchorLink>Behaviors</AnchorLink>
 <AnchorLink>Resources</AnchorLink>
+<AnchorLink>Spacing</AnchorLink>
 <AnchorLink>Content guidance</AnchorLink>
 <AnchorLink>Related components</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
@@ -117,6 +118,15 @@ The vertically oriented content items span 8 columns of the 16 column grid, whil
 
 <ResourceLinks name="Content item" type="layout" />
 
+### Spacing
+
+| Breakpoint    | `max`             | `xlg`             | `lg`              | `md`              | `sm`              |
+| ------------- | ----------------- | ----------------- | ----------------- | ----------------- | ----------------- |
+| Margin top    | `spacing-07` 32px | `spacing-07` 32px | `spacing-07` 32px | `spacing-07` 32px | `spacing-07` 32px |
+| Margin bottom | `spacing-07` 32px | `spacing-07` 32px | `spacing-07` 32px | `spacing-07` 32px | `spacing-07` 32px |
+
+For more information, see the [spacing guidelines](../guidelines/spacing)
+
 ## Content guidance
 
 | Element                                                    | Content type                                                                                                                                   | Required | Instances | Character limit <br/>(English / translated) | Notes                                |

diff --git a/src/pages/components/content-section.mdx b/src/pages/components/content-section.mdx
@@ -16,6 +16,7 @@ import ResourceLinks from 'components/ResourceLinks';
 <AnchorLink>Behaviors</AnchorLink>
 <AnchorLink>Gallery</AnchorLink>
 <AnchorLink>Resources</AnchorLink>
+<AnchorLink>Spacing</AnchorLink>
 <AnchorLink>Content guidance</AnchorLink>
 <AnchorLink>Related components</AnchorLink>
 <AnchorLink>Feedback</AnchorLink>
@@ -135,6 +136,16 @@ The content section is the main building block for establishing sections through
 
 <ResourceLinks name="Content section" type="layout" />
 
+### Spacing
+
+| Breakpoint                   | `max`              | `xlg`              | `lg`               | `md`              | `sm`              |
+| ---------------------------- | ------------------ | ------------------ | ------------------ | ----------------- | ----------------- |
+| Margin top                   | `spacing-10` 64px  | `spacing-10` 64px  | `spacing-10` 64px  | `spacing-07` 32px | `spacing-07` 32px |
+| Margin bottom with border    | `spacing-10` 64px  | `spacing-10` 64px  | `spacing-10` 64px  | `spacing-07` 32px | `spacing-07` 32px |
+| Margin bottom without border | `spacing-10` 160px | `spacing-10` 160px | `spacing-10` 160px | `spacing-10` 64px | `spacing-10` 64px |
+
+For more information, see the [spacing guidelines](../guidelines/spacing)
+
 ## Content guidance
 
 | Element                 | Content type | Required | Instances | Character limit <br/>(English / translated) | Notes                                                                                        |