chore(styles): match Docusaurus' stylesheet layout

docusaurus.config.js

@@ -135,7 +135,7 @@ module.exports = {
           customCss: [
             require.resolve('./node_modules/modern-normalize/modern-normalize.css'),
             require.resolve('./node_modules/@ionic-internal/ionic-ds/dist/tokens/tokens.css'),
-            require.resolve('./src/styles/custom.scss'),
+            require.resolve('./src/css/custom.scss'),
           ],
         },
       },

src/components/global/BestPracticeFigure/index.tsx

@@ -1,49 +1,49 @@
 import React, { type ReactNode } from 'react';
 
-import './best-practice-figure.css';
+import styles from './styles.module.css';
 
 /**
- Usage:
-
- import BestPracticeFigure from '@components/global/BestPracticeFigure';
-
- <BestPracticeFigure
-   text="..."
-   doText="..."
-   doNotText="..."
-   doImage={<img alt="..." src={useBaseUrl(...)} />}
-   doNotImage={<img alt="..." src={useBaseUrl(...)} />}
- />
-
- All images must have alt text for screen readers.
-
- Custom HTML can also be passed to any of the text properties by using curly braces:
-
- text={<>My text with a <Link to="/api/note">link</Link></>}
-
- Markdown such as backticks will not be processed when using curly braces.
- The <code> tag can be used instead:
-
- text={<>The <code>button</code> property</>}
-
- This component also supports a caution option. Typically you should use
- either a "Don't" image or a "Caution" image but not both.
-
- <BestPracticeFigure
-    text="..."
-    doText="..."
-    cautionText="..."
-    doImage={<img alt="..." src={useBaseUrl(...)} />}
-    cautionImage={<img alt="..." src={useBaseUrl(...)} />}
-  />
-
-  @prop text - Text that describes the figure as a whole
-  @prop doText - Text that describes a best practice
-  @prop doNotText - Text that describes an anti-pattern
-  @prop cautionText - Text that describes something that could be an anti-pattern based on use case
-  @prop doImage - Image associated with doText
-  @prop doNotImage - Image associated with doNotText
-  @prop cautionImage - Image associated with cautionText
+ * Usage:
+ *
+ * import BestPracticeFigure from '@components/global/BestPracticeFigure';
+ *
+ * <BestPracticeFigure
+ *   text="..."
+ *   doText="..."
+ *   doNotText="..."
+ *   doImage={<img alt="..." src={useBaseUrl(...)} />}
+ *   doNotImage={<img alt="..." src={useBaseUrl(...)} />}
+ * />
+ *
+ * All images must have alt text for screen readers.
+ *
+ * Custom HTML can also be passed to any of the text properties by using curly braces:
+ *
+ * text={<>My text with a <Link to="/api/note">link</Link></>}
+ *
+ * Markdown such as backticks will not be processed when using curly braces.
+ * The <code> tag can be used instead:
+ *
+ * text={<>The <code>button</code> property</>}
+ *
+ * This component also supports a caution option. Typically you should use
+ * either a "Don't" image or a "Caution" image but not both.
+ *
+ * <BestPracticeFigure
+ *   text="..."
+ *   doText="..."
+ *   cautionText="..."
+ *   doImage={<img alt="..." src={useBaseUrl(...)} />}
+ *   cautionImage={<img alt="..." src={useBaseUrl(...)} />}
+ * />
+ *
+ * @prop text - Text that describes the figure as a whole
+ * @prop doText - Text that describes a best practice
+ * @prop doNotText - Text that describes an anti-pattern
+ * @prop cautionText - Text that describes something that could be an anti-pattern based on use case
+ * @prop doImage - Image associated with doText
+ * @prop doNotImage - Image associated with doNotText
+ * @prop cautionImage - Image associated with cautionText
  */
 
 export default function BestPracticeFigure({
@@ -64,30 +64,30 @@ export default function BestPracticeFigure({
   cautionImage?: ReactNode;
 }) {
   return (
-    <div className="best-practice__container">
+    <div className={styles.container}>
       <p>{text}</p>
-      <div className="best-practice__do_dont">
-        <figure className="best-practice__do">
-          <div className="best-practice__image-wrapper">{doImage}</div>
+      <div className={styles.doDont}>
+        <figure className={styles.do}>
+          <div className={styles.imageWrapper}>{doImage}</div>
           <figcaption>
-            <div className="best-practice__do-text">Do</div>
+            <div className={styles.doText}>Do</div>
             <p>{doText}</p>
           </figcaption>
         </figure>
         {doNotText && doNotImage && (
-          <figure className="best-practice__dont">
-            <div className="best-practice__image-wrapper">{doNotImage}</div>
+          <figure className={styles.dont}>
+            <div className={styles.imageWrapper}>{doNotImage}</div>
             <figcaption>
-              <div className="best-practice__dont-text">Don't</div>
+              <div className={styles.dontText}>Don't</div>
               <p>{doNotText}</p>
             </figcaption>
           </figure>
         )}
         {cautionText && cautionImage && (
-          <figure className="best-practice__caution">
-            <div className="best-practice__image-wrapper">{cautionImage}</div>
+          <figure className={styles.caution}>
+            <div className={styles.imageWrapper}>{cautionImage}</div>
             <figcaption>
-              <div className="best-practice__caution-text">Caution</div>
+              <div className={styles.cautionText}>Caution</div>
               <p>{cautionText}</p>
             </figcaption>
           </figure>

src/components/global/BestPracticeFigure/best-practice-figure.css → src/components/global/BestPracticeFigure/styles.module.css

@@ -1,4 +1,4 @@
-.best-practice__do_dont {
+.doDont {
   display: grid;
 
   grid-template-columns: 1fr 1fr;
@@ -8,59 +8,59 @@
 
 /* Collapse to 1 column per row on smaller viewports */
 @media (max-width: 996px) {
-  .best-practice__do_dont {
+  .doDont {
     grid-template-columns: 1fr;
   }
 }
 
-.best-practice__container figcaption {
+.container figcaption {
   text-align: start;
 }
 
-.best-practice__do p,
-.best-practice__dont p,
-.best-practice__caution p {
+.do p,
+.dont p,
+.caution p {
   padding: 8px 16px;
 }
 
-.best-practice__image-wrapper {
+.imageWrapper {
   border-radius: 8px 8px 0px 0px;
 
   overflow: hidden;
 }
 
-.best-practice__dont-text,
-.best-practice__do-text,
-.best-practice__caution-text {
+.dontText,
+.doText,
+.cautionText {
   padding: 12px 16px;
 
   font-weight: 600;
 
   border-radius: 0px 0px 8px 8px;
 }
 
-.best-practice__do .best-practice__image-wrapper {
+.do .imageWrapper {
   border: 1px solid var(--c-blue-10);
 }
 
-.best-practice__dont .best-practice__image-wrapper {
+.dont .imageWrapper {
   border: 1px solid var(--c-red-10);
 }
 
-.best-practice__caution .best-practice__image-wrapper {
+.caution .imageWrapper {
   border: 1px solid var(--c-yellow-10);
 }
 
-.best-practice__dont-text {
+.dontText {
   color: var(--c-red-100);
   background: var(--c-red-10);
 }
-.best-practice__do-text {
+.doText {
   color: var(--c-blue-100);
   background: var(--c-blue-10);
 }
 
-.best-practice__caution-text {
+.cautionText {
   /* --c-yellow-100 does not have enough contrast
    * placed on top of --c-yellow-10, so we manually
    * choose a darker text color here.

src/components/global/DocDemo/index.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useRef, useCallback } from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 
-import './demo.css';
+import styles from './styles.module.css';
 
 const DocDemo = (props) => {
   const [ionicMode, setIonicMode] = useState('ios');
@@ -41,11 +41,11 @@ const DocDemo = (props) => {
   };
 
   const modeToggle = (
-    <div className="docs-demo-mode-toggle">
+    <div className={styles.modeToggle}>
       {['ios', 'md'].map((mode) => (
         <button
           className={clsx({
-            'is-selected': mode === ionicMode,
+            [styles.selected]: mode === ionicMode,
           })}
           title={`Toggle ${mode === 'ios' ? 'iOS' : 'Android'} mode`}
           onClick={() => setIonicMode(mode)}
@@ -58,26 +58,20 @@ const DocDemo = (props) => {
   );
 
   const sourceLink = (
-    <Link to={props.source} className="docs-demo-source" title="Demo Source">
+    <Link to={props.source} className={styles.source} title="Demo Source">
       View Source
     </Link>
   );
 
   const device = (
-    <div className={`docs-demo-device ${ionicMode}`}>
+    <div className={clsx(styles.device, styles[ionicMode])}>
       <figure>
-        <svg className="docs-demo-device__md-bar" viewBox="0 0 1384.3 40.3">
-          <path
-            className="st0"
-            d="M1343 5l18.8 32.3c.8 1.3 2.7 1.3 3.5 0L1384 5c.8-1.3-.2-3-1.7-3h-37.6c-1.5 0-2.5 1.7-1.7 3z"
-          />
-          <circle className="st0" cx="1299" cy="20.2" r="20" />
-          <path
-            className="st0"
-            d="M1213 1.2h30c2.2 0 4 1.8 4 4v30c0 2.2-1.8 4-4 4h-30c-2.2 0-4-1.8-4-4v-30c0-2.3 1.8-4 4-4zM16 4.2h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H16c-8.8 0-16-7.2-16-16s7.2-16 16-16z"
-          />
+        <svg className={styles.mdBar} viewBox="0 0 1384.3 40.3">
+          <path d="M1343 5l18.8 32.3c.8 1.3 2.7 1.3 3.5 0L1384 5c.8-1.3-.2-3-1.7-3h-37.6c-1.5 0-2.5 1.7-1.7 3z" />
+          <circle cx="1299" cy="20.2" r="20" />
+          <path d="M1213 1.2h30c2.2 0 4 1.8 4 4v30c0 2.2-1.8 4-4 4h-30c-2.2 0-4-1.8-4-4v-30c0-2.3 1.8-4 4-4zM16 4.2h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H16c-8.8 0-16-7.2-16-16s7.2-16 16-16z" />
         </svg>
-        <svg className="docs-demo-device__ios-notch" viewBox="0 0 219 31">
+        <svg className={styles.iosNotch} viewBox="0 0 219 31">
           <path
             d="M0 1V0h219v1a5 5 0 0 0-5 5v3c0 12.15-9.85 22-22 22H27C14.85 31 5 21.15 5 9V6a5 5 0 0 0-5-5z"
             fillRule="evenodd"
@@ -95,7 +89,7 @@ const DocDemo = (props) => {
   );
 
   return (
-    <div className="doc-demo">
+    <div>
       {modeToggle}
       {device}
       {props.source && sourceLink}