carbon-design-system · jharvey10 · Nov 11, 2022 · Oct 6, 2022 · Oct 6, 2022 · Oct 6, 2022
diff --git a/packages/mdx-components/package.json b/packages/mdx-components/package.json
@@ -14,6 +14,9 @@
   },
   "homepage": "https://github.com/carbon-design-system/carbon-platform#readme",
   "type": "module",
+  "files": [
+    "./dist/main/**/*"
+  ],
   "exports": {
     ".": "./dist/main/index.js",
     "./styles": "./dist/main/index.css"

@@ -9,17 +9,19 @@
 @use '@carbon/react/scss/type' as type;
 @use '@carbon/react/scss/theme' as theme;
 
-.accordion {
+@use '../utils' as *;
+
+.#{with-prefix('accordion')} {
   margin-top: spacing.$spacing-06;
   color: theme.$text-primary;
 }
 
 // override carbon, accordion right spacing
-.accordion :global(.cds--accordion__content) {
+.#{with-prefix('accordion')} :global(.cds--accordion__content) {
   padding-right: spacing.$spacing-10;
 }
 
 // override carbon, title font and spacing
-.accordion :global(.cds--accordion__title) {
+.#{with-prefix('accordion')} :global(.cds--accordion__title) {
   @include type.type-style('heading-02');
 }
@@ -4,16 +4,14 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Accordion, AccordionItem } from '@/components/accordion'
+import { Accordion, AccordionItem } from '../../../dist/main/index'
 
-const stories = {
-  title: 'MDX/Accordion',
+export default {
+  title: 'Components/Accordion',
   component: Accordion,
   subcomponents: { AccordionItem }
 }
 
-export default stories
-
 const Template = (args) => (
   <Accordion {...args}>
     <AccordionItem title="Title 1">Content Section</AccordionItem>

@@ -6,19 +6,25 @@
  */
 
 import { Accordion as CarbonAccordion, Column, Grid } from '@carbon/react'
-import clsx from 'clsx'
+import { clsx } from 'clsx'
 import PropTypes from 'prop-types'
+import React from 'react'
 
-import styles from './accordion.module.scss'
+import { MdxComponent } from '../interfaces.js'
+import { withPrefix } from '../utils.js'
+
+interface AccordionProps {
+  className?: string | null
+}
 
 /**
  * The `<Accordion>` and `<AccordionItem>` components are used together to display a list of content
  * sections that can be toggled open by clicking the respective title of each section.
  */
-const Accordion = ({ className, ...rest }) => (
+const Accordion: MdxComponent<AccordionProps> = ({ className, ...rest }) => (
   <Grid narrow>
     <Column sm={4} md={8} lg={8}>
-      <CarbonAccordion size="xl" {...rest} className={clsx(className, styles.accordion)} />
+      <CarbonAccordion size="xl" {...rest} className={clsx(className, withPrefix('accordion'))} />
     </Column>
   </Grid>
 )
@@ -30,4 +36,5 @@ Accordion.propTypes = {
   className: PropTypes.string
 }
 
+export { AccordionProps }
 export default Accordion
@@ -8,16 +8,17 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import slugifyCjs from 'slugify'
 
+import { MdxComponent } from '../interfaces.js'
 import { withPrefix } from '../utils.js'
 
 const slugify = slugifyCjs.default
 
 interface AnchorLinkProps {
-  to?: string
+  to?: string | null
   children: string
 }
 
-const AnchorLink = ({ to, children }: AnchorLinkProps) => {
+const AnchorLink: MdxComponent<AnchorLinkProps> = ({ to, children }) => {
   const href = to || `#${slugify(children, { lower: true })}`
 
   return (

@@ -10,10 +10,11 @@ import { clsx } from 'clsx'
 import PropTypes from 'prop-types'
 import React, { Children, ReactNode } from 'react'
 
+import { MdxComponent } from '../interfaces.js'
 import { withPrefix } from '../utils.js'
 
 interface AnchorLinksProps {
-  small?: boolean
+  small?: boolean | null
   children: ReactNode
 }
 
@@ -25,7 +26,7 @@ interface AnchorLinksProps {
  * For most pages, we recommend starting with a `PageDescription` followed by `AnchorLinks` if the
  * content is long enough.
  */
-const AnchorLinks = ({ children, small }: AnchorLinksProps) => {
+const AnchorLinks: MdxComponent<AnchorLinksProps> = ({ children, small }) => {
   const isColumn = Children.count(children) > 9
   const classNames = clsx({
     [withPrefix('list--small')]: small,
@@ -46,6 +47,10 @@ const AnchorLinks = ({ children, small }: AnchorLinksProps) => {
 }
 
 AnchorLinks.propTypes = {
+  /**
+   * A set of links to be rendered as part of this AnchorLinks component.
+   */
+  children: PropTypes.node,
   /**
    * Display small font size.
    */

@@ -10,7 +10,9 @@
 @use '@carbon/react/scss/theme' as theme;
 @use '@carbon/react/scss/type' as type;
 
-.aside {
+@use '../utils' as *;
+
+.#{with-prefix('aside')} {
   @include type.type-style('body-01');
 
   position: relative;
@@ -49,6 +51,6 @@
   }
 }
 
-.aside--no-rule::before {
+.#{with-prefix('aside--no-rule')}::before {
   content: none;
 }
@@ -6,10 +6,10 @@
  */
 import { Column, Grid } from '@carbon/react'
 
-import Aside from '@/components/aside'
+import { Aside } from '../../../dist/main/index'
 
-const stories = {
-  title: 'MDX/Aside',
+export default {
+  title: 'Components/Aside',
   component: Aside,
   argTypes: {
     children: {
@@ -21,8 +21,6 @@ const stories = {
   }
 }
 
-export default stories
-
 const Template = (args) => (
   <Grid>
     <Column lg={4}>

@@ -6,19 +6,27 @@
  */
 
 import { Column, Grid } from '@carbon/react'
-import clsx from 'clsx'
+import { clsx } from 'clsx'
 import PropTypes from 'prop-types'
+import React, { ReactNode } from 'react'
 
-import styles from './aside.module.scss'
+import { MdxComponent } from '../interfaces.js'
+import { withPrefix } from '../utils.js'
+
+interface AsideProps {
+  children: ReactNode
+  className?: string | null
+  hideRule?: boolean | null
+}
 
 /**
  * The `<Aside>` component is a wrapper component that adds styling to make the text display
  *  smaller than the default body text with a one column offset. It is designed to be used on
  * the side of the page within grid components. Add an aria-label for a11y.
  */
-const Aside = ({ children, className, hideRule, ...rest }) => {
-  const asideClasses = clsx(styles.aside, className, {
-    [styles['aside--no-rule']]: !!hideRule
+const Aside: MdxComponent<AsideProps> = ({ children, className, hideRule, ...rest }) => {
+  const asideClasses = clsx(withPrefix('aside'), className, {
+    [withPrefix('aside--no-rule')]: !!hideRule
   })
 
   return (
@@ -32,8 +40,6 @@ const Aside = ({ children, className, hideRule, ...rest }) => {
   )
 }
 
-export default Aside
-
 Aside.propTypes = {
   /**
    * Child of the Aside.
@@ -50,3 +56,6 @@ Aside.propTypes = {
    */
   hideRule: PropTypes.bool
 }
+
+export { AsideProps }
+export default Aside
@@ -9,13 +9,15 @@
 @use '@carbon/react/scss/type' as type;
 @use '@carbon/react/scss/theme' as theme;
 
-.container {
+@use '../utils' as *;
+
+.#{with-prefix('caption-container')} {
   margin-top: spacing.$spacing-05;
 }
 
-.caption,
-.caption p,
-.caption div {
+.#{with-prefix('caption')},
+.#{with-prefix('caption')} p,
+.#{with-prefix('caption')} div {
   @include type.type-style('body-short-01');
 
   margin-top: 0;

@@ -4,15 +4,14 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import Caption from '@/components/caption'
+import { Caption } from '../../../dist/main/index'
 
-const stories = {
-  title: 'MDX/Caption',
-  component: Caption
+export default {
+  title: 'Components/Caption',
+  component: Caption,
+  argTypes: {}
 }
 
-export default stories
-
 const Template = (args) => (
   <Caption {...args}>Lorem ipsum dolor sit amet Lorem Lorem Lorem Lorem Lorem Lorem ipsum.</Caption>
 )

@@ -0,0 +1,38 @@
+/*
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Column, Grid } from '@carbon/react'
+import { clsx } from 'clsx'
+import PropTypes from 'prop-types'
+import React, { ReactNode } from 'react'
+
+import { MdxComponent } from '../interfaces.js'
+import { withPrefix } from '../utils.js'
+
+interface CaptionProps {
+  children: ReactNode
+  className?: string | null
+}
+
+/**
+ * The `<Caption>` component is typically used below images or videos.
+ */
+const Caption: MdxComponent<CaptionProps> = ({ children, className }) => (
+  <Grid className={clsx(className, withPrefix('caption-container'))}>
+    <Column sm={4} md={6} lg={6}>
+      <p className={withPrefix('caption')}>{children}</p>
+    </Column>
+  </Grid>
+)
+
+Caption.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string
+}
+
+export { CaptionProps }
+export default Caption
@@ -1,23 +1,33 @@
+/*
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 @use '@carbon/react/scss/theme' as theme;
 @use '@carbon/react/scss/breakpoint' as breakpoint;
+
+@use '../utils' as *;
+
 // Sets gray border on the top of cards at the smallest breakpoint and removes the margin set by the <Column> in the Grid component.
-.card-group [class*='column'] {
+.#{with-prefix('card-group')} [class*='column'] {
   border-top: 1px solid theme.$border-subtle;
   margin-bottom: 0;
 }
 
-.card-group [class*='column']:first-child {
+.#{with-prefix('card-group')} [class*='column']:first-child {
   border-top: 0 solid transparent;
 }
 
 // Borders for cards at the medium breakpoint
-.card-group [class*='column']:nth-child(-n + 2) {
+.#{with-prefix('card-group')} [class*='column']:nth-child(-n + 2) {
   @include breakpoint.breakpoint('md') {
     border-top: 0 solid transparent;
   }
 }
 
-.card-group [class*='column']:nth-child(even) {
+.#{with-prefix('card-group')} [class*='column']:nth-child(even) {
   @include breakpoint.breakpoint('md') {
     box-shadow: -1px 0 0 0 theme.$border-subtle;
   }

@@ -0,0 +1,34 @@
+/*
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Column } from '@carbon/react'
+
+import { CardGroup } from '../../../dist/main/index'
+
+export default {
+  title: 'Components/CardGroup',
+  component: CardGroup,
+  argTypes: {
+    children: {
+      control: false
+    },
+    className: {
+      control: false
+    }
+  }
+}
+
+const Template = () => (
+  <CardGroup>
+    <Column lg={4}>TODO: Add ResourceCard</Column>
+    <Column lg={4}>TODO: Add ResourceCard</Column>
+    <Column lg={4}>TODO: Add ResourceCard</Column>
+    <Column lg={4}>TODO: Add ResourceCard</Column>
+  </CardGroup>
+)
+
+export const Default = Template.bind({})
+Default.args = {}