feat: V11 migration for gatsby-theme

.github/CODEOWNERS

@@ -1 +1 @@
-* @carbon-design-system/developers-auxiliary
+* @carbon-design-system/developers-carbon-brand

.github/CONTRIBUTING.md

@@ -117,8 +117,7 @@ features, by not reporting duplicate issues.
    for more details on commit messages.
 
 7. Once ready for feedback from other contributors and maintainers, **push your
-   commits to your fork** (be sure to run `yarn ci-check` before pushing, to
-   make sure your code passes linting and unit tests):
+   commits to your fork** :
 
    ```
    $ git push origin { YOUR_BRANCH_NAME }

.stylelintrc

@@ -17,6 +17,7 @@
           "composes"
         ]
       }
-    ]
+    ],
+    "no-descending-specificity": null
   }
 }

CHANGELOG.md

@@ -1,3 +1,41 @@
+## [2.3.0](https://github.com/carbon-design-system/gatsby-theme-carbon/compare/v2.2.0...v2.3.0) (2022-02-17)
+
+
+### Features
+
+* **expressive-list-container:** adds expressive list container component ([#1198](https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1198)) ([83b7914](https://github.com/carbon-design-system/gatsby-theme-carbon/commit/83b7914cdf86fed6dbe9232e21b53cb7328c32ab))
+* add additional aspect ratios for do dont ([#1216](https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1216)) ([efc5a30](https://github.com/carbon-design-system/gatsby-theme-carbon/commit/efc5a3081cc9d8375cfd9ddb1793b046e7004771))
+* new config option to add default mdx layouts ([#1214](https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1214)) ([81f8fe3](https://github.com/carbon-design-system/gatsby-theme-carbon/commit/81f8fe31e95a6fc8cb19ee9414e9972a4ca56a1c))
+* **expressive-list:** creates the expressive content only list ([#1197](https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1197)) ([17ec996](https://github.com/carbon-design-system/gatsby-theme-carbon/commit/17ec996d147d02ffca0374a8e9e272869bd340f0))
+
+
+### Bug Fixes
+
+* do dont component updates ([#1220](https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1220)) ([67fc11c](https://github.com/carbon-design-system/gatsby-theme-carbon/commit/67fc11c1df4a450fc6011d0696cc92fb2685e34b))
+* update the references to the new homepage ([#1212](https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1212)) ([57d3e88](https://github.com/carbon-design-system/gatsby-theme-carbon/commit/57d3e886b8ef260481414ef8b7d20c9668f81fc9))
+
+## [2.2.0](https://github.com/carbon-design-system/gatsby-theme-carbon/compare/v2.1.6...v2.2.0) (2022-01-10)
+
+
+### Features
+
+* **switcher:** add carbon for ibm products remove ix ([#1205](https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1205)) ([f9be700](https://github.com/carbon-design-system/gatsby-theme-carbon/commit/f9be700ac5b6325eb73892f0211b59d177cf53fd))
+
+
+### Bug Fixes
+
+* aside docs ([#1202](https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1202)) ([8a4dd50](https://github.com/carbon-design-system/gatsby-theme-carbon/commit/8a4dd50c4d81eef57b98891c14bd00b8c2d5dace))
+
+### [2.1.6](https://github.com/carbon-design-system/gatsby-theme-carbon/compare/v2.1.5...v2.1.6) (2021-12-03)
+
+### [2.1.5](https://github.com/carbon-design-system/gatsby-theme-carbon/compare/v2.1.4...v2.1.5) (2021-10-28)
+
+
+### Bug Fixes
+
+* grid alignment at max breakpoint ([#1181](https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1181)) ([9a44a87](https://github.com/carbon-design-system/gatsby-theme-carbon/commit/9a44a87b8958c5a790e1c5726a341e31e4a5ae63))
+* medium post image aspect ratio closes [#1176](https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1176) ([#1185](https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1185)) ([566cfe7](https://github.com/carbon-design-system/gatsby-theme-carbon/commit/566cfe77f4a7489e5f300eb0e94f64aebf3ee2f6))
+
 ### [2.1.4](https://github.com/carbon-design-system/gatsby-theme-carbon/compare/v2.1.4-next.0...v2.1.4) (2021-10-19)
 
 ### [2.1.4-next.0](https://github.com/carbon-design-system/gatsby-theme-carbon/compare/v2.1.3...v2.1.4-next.0) (2021-10-19)

README.md

@@ -7,8 +7,8 @@ The Gatsby Carbon theme includes all the configuration you need to build a beaut
 ## Resources
 
 - [Contribution guidelines](.github/CONTRIBUTING.md)
-- [Getting Started](https://gatsby-theme-carbon.now.sh/getting-started)
-- [Guides](https://gatsby-theme-carbon.now.sh/guides/configuration)
-- [Components](https://gatsby-theme-carbon.now.sh/components/markdown)
-- [Demo](https://gatsby-theme-carbon.now.sh/demo)
-- [Gallery](https://gatsby-theme-carbon.now.sh/gallery)
+- [Getting Started](https://gatsby.carbondesignsystem.com/getting-started)
+- [Guides](https://gatsby.carbondesignsystem.com/guides/configuration)
+- [Components](https://gatsby.carbondesignsystem.com/components/markdown)
+- [Demo](https://gatsby.carbondesignsystem.com/demo)
+- [Gallery](https://gatsby.carbondesignsystem.com/gallery)

package.json

@@ -93,7 +93,7 @@
     "husky": "^4.2.3",
     "lerna": "^3.22.1",
     "lint-staged": "^10.0.9",
-    "prettier": "^2.0.2",
+    "prettier": "^2.5.1",
     "prettier-config-carbon": "^0.2.0",
     "release-it": "^14.6.1",
     "release-it-yarn-workspaces": "^2.0.1",
@@ -102,5 +102,5 @@
     "stylelint-scss": "^3.16.0",
     "yarn": "^1.22.4"
   },
-  "version": "2.1.4"
+  "version": "2.3.0"
 }

packages/example/README.md

@@ -12,7 +12,7 @@
 ## How do I use it?
 
 Check out our quick
-[getting started](https://gatsby-theme-carbon.now.sh/getting-started) guide and
+[getting started](https://gatsby.carbondesignsystem.com/getting-started) guide and
 video!
 
 `gatsby-theme-carbon` at it’s core relies on [mdx](https://mdxjs.com/) for page
@@ -28,4 +28,4 @@ You’re also free to make your own components and use them in your MDX pages.
 
 ## What’s Next?
 
-[Check out the docs!](https://gatsby-theme-carbon.now.sh)
+[Check out the docs!](https://gatsby.carbondesignsystem.com)

packages/example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "example",
   "private": true,
-  "version": "2.1.4",
+  "version": "2.3.0",
   "license": "Apache 2.0",
   "scripts": {
     "dev": "gatsby develop -H 0.0.0.0",
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "gatsby": "^3.3.1",
-    "gatsby-theme-carbon": "^2.1.4",
+    "gatsby-theme-carbon": "^2.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   }

packages/example/src/components/Homepage.module.scss

@@ -1,5 +1,5 @@
 .callout-link {
-  @include carbon--type-style('body-long-02');
+  @include type-style('body-long-02');
   display: table-cell; // like display block, but the width fits to content rather than 100%
   position: relative;
   top: $spacing-06; //margin-top doesn't work on table-cell, and padding-top looks weird on focus

packages/example/src/data/nav-items.yaml

@@ -50,6 +50,10 @@
       path: /components/DoDontExample
     - title: DoDontRow
       path: /components/DoDontRow
+    - title: ExpressiveList
+      path: /components/ExpressiveList
+    - title: ExpressiveListContainer
+      path: /components/ExpressiveListContainer
     - title: FeatureCard
       path: /components/FeatureCard
     - title: FeedbackDialog

packages/example/src/pages/components/Aside.mdx

@@ -19,9 +19,8 @@ It should only be used within a `<Column>` component with specific parameters.
 **Warning:** If you use more than one `<Aside>` component on a single page, you
 need to provide an accessibility label so that someone using assistive
 technology can quickly understand the purpose of the landmark. See
-[Mozilla Developer Network’s documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Complementary_role#Labeling_landmarks)
-for more information. Props for accessibility labels are described in the
-[Props section](#props) below.
+Mozilla Developer Network’s documentation for more information. Props for accessibility labels are described in the
+props below.
 
 </InlineNotification>
 
@@ -103,8 +102,8 @@ attitudes and approach used at the time.
 <Title>Without hanging rule</Title>
 
 ```mdx path=components/Aside/Aside.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/Aside
-<Column colMd={2} colLg={3} offsetMd={1} offsetLg={1} hideRule>
-  <Aside>
+<Column colMd={2} colLg={3} offsetMd={1} offsetLg={1}>
+  <Aside hideRule>
 
 A by-product of every experience with IBM should be time—time saved or time
 well-spent.

packages/example/src/pages/components/DoDontExample.mdx

@@ -3,6 +3,13 @@ title: DoDontExample
 description: Usage instructions for the DoDontExample component
 ---
 
+<InlineNotification kind="warning">
+
+**Warning:** This component will be deprecated in a future release. Please use
+the `<DoDontRow>` and `<DoDont>`component instead.
+
+</InlineNotification>
+
 <PageDescription>
 
 The `<DoDontExample>` component will generally need to be placed inside `<Row>`
@@ -27,7 +34,15 @@ and `<Column>` components to align them to the grid at the correct size.
 
 <Title>Text</Title>
 
-<DoDontExample type="dont" aspectRatio="1:1"  color="dark" captionTitle="Caption title" caption="Caption" text="This is some text" />
+<DoDontExample
+  type="dont"
+  aspectRatio="1:1"
+  color="dark"
+  captionTitle="Caption title"
+  caption="Caption"
+  text="This is some text"
+/>
+
 </Column>
 </Row>
 <Row>
@@ -43,6 +58,55 @@ and `<Column>` components to align them to the grid at the correct size.
 </Column>
 </Row>
 
+<Title>Aspect ratios</Title>
+
+<Row>
+
+<Column colMd={4} colLg={4}>
+
+<DoDontExample aspectRatio="4:3" text="4:3" />
+
+</Column>
+<Column colMd={4} colLg={4}>
+
+<DoDontExample aspectRatio="16:9" text="16:9" />
+
+</Column>
+<Column colMd={4} colLg={4}>
+
+<DoDontExample aspectRatio="2:1" text="2:1" />
+
+</Column>
+</Row>
+
+<Row>
+<Column colMd={4} colLg={4}>
+
+<DoDontExample aspectRatio="9:16" text="9:16" />
+
+</Column>
+
+<Column colMd={4} colLg={4}>
+
+<DoDontExample aspectRatio="1:2" text="1:2" />
+
+</Column>
+
+<Column colMd={4} colLg={4}>
+
+<DoDontExample aspectRatio="3:4" text="3:4" />
+
+</Column>
+</Row>
+
+<Row>
+<Column colMd={4} colLg={4}>
+
+<DoDontExample aspectRatio="1:1" text="1:1" />
+
+</Column>
+</Row>
+
 ## Code
 
 <Title>Image</Title>
@@ -76,14 +140,26 @@ and `<Column>` components to align them to the grid at the correct size.
 </DoDontExample>
 ```
 
+<Title>Aspect ratios</Title>
+
+```mdx path=components/DoDontExample/DoDontExample.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/DoDontExample
+<DoDontExample aspectRatio="4:3" text="4:3" />
+<DoDontExample aspectRatio="16:9" text="16:9" />
+<DoDontExample aspectRatio="2:1" text="2:1" />
+<DoDontExample aspectRatio="9:16" text="9:16" />
+<DoDontExample aspectRatio="1:2" text="1:2" />
+<DoDontExample aspectRatio="3:4" text="3:4" />
+<DoDontExample aspectRatio="1:1" text="1:1" />
+```
+
 ### Props
 
-| property     | propType | required | default | description                                                                                                                                                                                                                                      |
-| ------------ | -------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| children     | node     |          |         | child node, expects a markdown image or `<Video>` component                                                                                                                                                                                      |
-| text         | string   |          |         | text to display inside the component instead of an image or video                                                                                                                                                                                |
-| caption      | string   |          |         | caption                                                                                                                                                                                                                                          |
-| captionTitle | string   |          |         | caption title                                                                                                                                                                                                                                    |
-| type         | string   |          | dont    | set to `do` to show green check, otherwise shows pink X                                                                                                                                                                                          |
-| color        | string   |          | light   | set to `dark` for dark background card                                                                                                                                                                                                           |
-| aspectRatio  | string   |          |         | set to `1:1` to force square example <br/>_(We welcome [contributions](https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/DoDontExample) to add additional aspect ratio options)_ |
+| property     | propType | required | default | description                                                       |
+| ------------ | -------- | -------- | ------- | ----------------------------------------------------------------- |
+| children     | node     |          |         | child node, expects a markdown image or `<Video>` component       |
+| text         | string   |          |         | text to display inside the component instead of an image or video |
+| caption      | string   |          |         | caption                                                           |
+| captionTitle | string   |          |         | caption title                                                     |
+| type         | string   |          | dont    | set to `do` to show green check, otherwise shows pink X           |
+| color        | string   |          | light   | set to `dark` for dark background card                            |
+| aspectRatio  | string   |          |         | `1:1`,`1:2`,`2:1`,`3:4`,`4:3`,`16:9`,`9:16`                       |

packages/example/src/pages/components/DoDontRow.mdx

@@ -58,6 +58,31 @@ component, which now includes built in columns.
 
 </DoDontRow>
 
+<DoDontRow>
+
+<DoDont aspectRatio="4:3" text="4:3" />
+
+<DoDont aspectRatio="16:9" text="16:9" />
+
+<DoDont aspectRatio="2:1" text="2:1" />
+
+</DoDontRow>
+
+<DoDontRow>
+
+<DoDont aspectRatio="9:16" text="9:16" />
+
+<DoDont aspectRatio="1:2" text="1:2" />
+
+<DoDont aspectRatio="3:4" text="3:4" />
+
+</DoDontRow>
+<DoDontRow>
+
+<DoDont aspectRatio="1:1" text="1:1" />
+
+</DoDontRow>
+
 ## Code
 
 ### Image
@@ -99,6 +124,24 @@ component, which now includes built in columns.
 </DoDontRow>
 ```
 
+### Aspect Ratios
+
+```mdx path=components/DoDontRow/DoDontRow.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/DoDontRow
+<DoDontRow>
+  <DoDont aspectRatio="4:3" text="4:3" />
+  <DoDont aspectRatio="16:9" text="16:9" />
+  <DoDont aspectRatio="2:1" text="2:1" />
+</DoDontRow>
+<DoDontRow>
+  <DoDont aspectRatio="9:16" text="9:16" />
+  <DoDont aspectRatio="1:2" text="1:2" />
+  <DoDont aspectRatio="3:4" text="3:4" />
+</DoDontRow>
+<DoDontRow>
+  <DoDont aspectRatio="1:1" text="1:1" />
+</DoDontRow>
+```
+
 ## Props
 
 ### DoDontRow
@@ -109,13 +152,13 @@ component, which now includes built in columns.
 
 ### Do & Dont
 
-| property       | propType | required | default            | description                                                                                                                                                                                                                                      |
-| -------------- | -------- | -------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| children       | node     |          |                    | child node, expects a markdown image or `<Video>` component                                                                                                                                                                                      |
-| text           | string   |          |                    | text to display inside the component instead of an image or video                                                                                                                                                                                |
-| caption        | string   |          |                    | caption                                                                                                                                                                                                                                          |
-| captionTitle   | string   |          |                    | caption title                                                                                                                                                                                                                                    |
-| color          | string   |          | light              | set to `dark` for dark background card                                                                                                                                                                                                           |
-| aspectRatio    | string   |          |                    | set to `1:1` to force square example <br/>_(We welcome [contributions](https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/DoDontExample) to add additional aspect ratio options)_ |
-| type           | string   |          | `do`               | specify the type of example with `do` or `dont`                                                                                                                                                                                                  |
-| ...columnProps | number   |          | `colMd=4, colLg=4` | specify any `<Column>` props to pass down                                                                                                                                                                                                        |
+| property       | propType | required | default            | description                                                       |
+| -------------- | -------- | -------- | ------------------ | ----------------------------------------------------------------- |
+| children       | node     |          |                    | child node, expects a markdown image or `<Video>` component       |
+| text           | string   |          |                    | text to display inside the component instead of an image or video |
+| caption        | string   |          |                    | caption                                                           |
+| captionTitle   | string   |          |                    | caption title                                                     |
+| color          | string   |          | light              | set to `dark` for dark background card                            |
+| aspectRatio    | string   |          |                    | `1:1`,`1:2`,`2:1`,`3:4`,`4:3`,`16:9`,`9:16`                       |
+| type           | string   |          | `do`               | specify the type of example with `do` or `dont`                   |
+| ...columnProps | number   |          | `colMd=4, colLg=4` | specify any `<Column>` props to pass down                         |