fixup! fixup! Change documentation platform from Docz to Docoff

react-ui-org · Apr 5, 2023 · 65a0bdf · 65a0bdf
1 parent 4885f3f
commit 65a0bdf
Show file tree

Hide file tree

Showing 10 changed files with 269 additions and 205 deletions.
diff --git a/src/components/Button/README.md b/src/components/Button/README.md
@@ -459,17 +459,25 @@ nicely when placed in row.
 ```docoff-react-preview
 <style type="text/css">
   {`
-    .example--themed-buttons {
-      --rui-Button__font-weight: bold;
-      --rui-Button__letter-spacing: 0.05em;
-      --rui-Button__text-transform: uppercase;
-      --rui-Button__border-radius: 0;
-      --rui-Button--filled--primary--default__box-shadow:
-        0.1em 0.1em 0.5em rgba(0, 0, 0, 0.3);
-      --rui-Button--medium__height: 3rem;
-      --rui-Button--medium__padding-x: 1.25rem;
-      --rui-Button--medium__padding-y: 0.25rem;
-    }
+  .example {
+    margin: 0;
+  }
+
+  .example > * {
+    margin: 4px;
+  }
+
+  .example--themed-buttons {
+    --rui-Button__font-weight: bold;
+    --rui-Button__letter-spacing: 0.05em;
+    --rui-Button__text-transform: uppercase;
+    --rui-Button__border-radius: 0;
+    --rui-Button--filled--primary--default__box-shadow:
+      0.1em 0.1em 0.5em rgba(0, 0, 0, 0.3);
+    --rui-Button--medium__height: 3rem;
+    --rui-Button--medium__padding-x: 1.25rem;
+    --rui-Button--medium__padding-y: 0.25rem;
+  }
   `}
 </style>
 <Button label="Default filled button" />
@@ -502,19 +510,27 @@ Example:
 ```docoff-react-preview
 <style type="text/css">
   {`
-    .example--themed-disabled-buttons {
-      --rui-Button__border-radius: 0;
-      --rui-Button--disabled__opacity: 0.4;
-      --rui-Button--disabled__cursor: default;
-      --rui-Button--filled--primary--disabled__color: slate;
-      --rui-Button--filled--primary--disabled__border-color: silver;
-      --rui-Button--filled--primary--disabled__background: silver;
-      --rui-Button--filled--success--disabled__color: slate;
-      --rui-Button--filled--success--disabled__border-color: silver;
-      --rui-Button--filled--success--disabled__background: silver;
-      --rui-Button--outline--primary--disabled__color: slate;
-      --rui-Button--outline--primary--disabled__border-color: silver;
-    }
+  .example {
+    margin: 0;
+  }
+
+  .example > * {
+    margin: 4px;
+  }
+
+  .example--themed-disabled-buttons {
+    --rui-Button__border-radius: 0;
+    --rui-Button--disabled__opacity: 0.4;
+    --rui-Button--disabled__cursor: default;
+    --rui-Button--filled--primary--disabled__color: slate;
+    --rui-Button--filled--primary--disabled__border-color: silver;
+    --rui-Button--filled--primary--disabled__background: silver;
+    --rui-Button--filled--success--disabled__color: slate;
+    --rui-Button--filled--success--disabled__border-color: silver;
+    --rui-Button--filled--success--disabled__background: silver;
+    --rui-Button--outline--primary--disabled__color: slate;
+    --rui-Button--outline--primary--disabled__border-color: silver;
+  }
   `}
 </style>
 <Button

diff --git a/src/components/ButtonGroup/README.md b/src/components/ButtonGroup/README.md
@@ -177,26 +177,26 @@ state of individual buttons can be indicated by showing an icon.
 ```docoff-react-preview
 <ButtonGroup>
   <Button
-   color="success" label="Week"
-
+    color="success"
+    label="Week"
     feedbackIcon={<rui-icon icon="success" />}
   />
   <Button color="secondary"label="Month" />
   <Button color="secondary"label="Year" />
 </ButtonGroup>
 <ButtonGroup priority="outline">
   <Button
-
     color="success"
-   label="Week" feedbackIcon={<rui-icon icon="success" />}
+    label="Week"
+    feedbackIcon={<rui-icon icon="success" />}
   />
   <Button color="secondary"label="Month" />
   <Button color="secondary"label="Year" />
 </ButtonGroup>
 <ButtonGroup priority="flat">
   <Button
-   color="success" label="Week"
-
+    color="success"
+    label="Week"
     feedbackIcon={<rui-icon icon="success" />}
   />
   <Button color="secondary"label="Month" />

diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md
@@ -388,114 +388,114 @@ There are two ways to position buttons within the ModalFooter:
 
 ```docoff-react-preview
 React.createElement(() => {
-    const [modalOpen, setModalOpen] = React.useState(false);
-    const [modalJustify, setModalJustify] = React.useState('center');
-    const modalPrimaryButtonRef = React.useRef();
-    const modalCloseButtonRef = React.useRef();
-    return (
-      <>
-        <Button
-          label="Launch modal with footer variants"
-          onClick={() => setModalOpen(true)}
-        />
-        <div>
-          {modalOpen && (
-            <Modal
-              closeButtonRef={modalCloseButtonRef}
-              primaryButtonRef={modalPrimaryButtonRef}
-            >
-              <ModalHeader>
-                <ModalTitle>Footer justification</ModalTitle>
-                <ModalCloseButton onClick={() => setModalOpen(false)} />
-              </ModalHeader>
-              <ModalBody>
-                <ModalContent>
-                  <Radio
-                    label="Footer justification"
-                    onChange={(e) => setModalJustify(e.target.value)}
-                    options={[
-                      {
-                        label: 'start',
-                        value: 'start',
-                      },
-                      {
-                        label: 'center',
-                        value: 'center',
-                      },
-                      {
-                        label: 'end',
-                        value: 'end',
-                      },
-                      {
-                        label: 'space-between',
-                        value: 'space-between',
-                      },
-                      {
-                        label: 'stretch (with a custom layout)',
-                        value: 'stretch',
-                      },
-                    ]}
-                    value={modalJustify}
-                  />
-                </ModalContent>
-              </ModalBody>
-              <ModalFooter justify={modalJustify}>
-                {
-                  modalJustify === 'stretch'
-                    ? (
-                      <Toolbar justify="space-between">
-                          <ToolbarGroup>
-                            <ToolbarItem>
-                              <Button
-                                color="danger"
-                                label="Delete"
-                                onClick={() => setModalOpen(false)}
-                                ref={modalPrimaryButtonRef}
-                              />
-                            </ToolbarItem>
-                            <ToolbarItem>
-                              <Button
-                                color="warning"
-                                label="Archive"
-                                onClick={() => setModalOpen(false)}
-                                ref={modalPrimaryButtonRef}
-                              />
-                            </ToolbarItem>
-                          </ToolbarGroup>
-                        <ToolbarItem>
-                          <Button
-                            color="secondary"
-                            label="Close"
-                            onClick={() => setModalOpen(false)}
-                            priority="outline"
-                            ref={modalCloseButtonRef}
-                          />
-                        </ToolbarItem>
-                      </Toolbar>
-                    ) : (
-                      <>
-                        <Button
-                          label="OK"
-                          onClick={() => setModalOpen(false)}
-                          ref={modalPrimaryButtonRef}
-                        />
+  const [modalOpen, setModalOpen] = React.useState(false);
+  const [modalJustify, setModalJustify] = React.useState('center');
+  const modalPrimaryButtonRef = React.useRef();
+  const modalCloseButtonRef = React.useRef();
+  return (
+    <>
+      <Button
+        label="Launch modal with footer variants"
+        onClick={() => setModalOpen(true)}
+      />
+      <div>
+        {modalOpen && (
+          <Modal
+            closeButtonRef={modalCloseButtonRef}
+            primaryButtonRef={modalPrimaryButtonRef}
+          >
+            <ModalHeader>
+              <ModalTitle>Footer justification</ModalTitle>
+              <ModalCloseButton onClick={() => setModalOpen(false)} />
+            </ModalHeader>
+            <ModalBody>
+              <ModalContent>
+                <Radio
+                  label="Footer justification"
+                  onChange={(e) => setModalJustify(e.target.value)}
+                  options={[
+                    {
+                      label: 'start',
+                      value: 'start',
+                    },
+                    {
+                      label: 'center',
+                      value: 'center',
+                    },
+                    {
+                      label: 'end',
+                      value: 'end',
+                    },
+                    {
+                      label: 'space-between',
+                      value: 'space-between',
+                    },
+                    {
+                      label: 'stretch (with a custom layout)',
+                      value: 'stretch',
+                    },
+                  ]}
+                  value={modalJustify}
+                />
+              </ModalContent>
+            </ModalBody>
+            <ModalFooter justify={modalJustify}>
+              {
+                modalJustify === 'stretch'
+                  ? (
+                    <Toolbar justify="space-between">
+                        <ToolbarGroup>
+                          <ToolbarItem>
+                            <Button
+                              color="danger"
+                              label="Delete"
+                              onClick={() => setModalOpen(false)}
+                              ref={modalPrimaryButtonRef}
+                            />
+                          </ToolbarItem>
+                          <ToolbarItem>
+                            <Button
+                              color="warning"
+                              label="Archive"
+                              onClick={() => setModalOpen(false)}
+                              ref={modalPrimaryButtonRef}
+                            />
+                          </ToolbarItem>
+                        </ToolbarGroup>
+                      <ToolbarItem>
                         <Button
                           color="secondary"
                           label="Close"
                           onClick={() => setModalOpen(false)}
                           priority="outline"
                           ref={modalCloseButtonRef}
                         />
-                      </>
-                    )
-                }
-              </ModalFooter>
-            </Modal>
-          )}
-        </div>
-      </>
-    );
-  }}
+                      </ToolbarItem>
+                    </Toolbar>
+                  ) : (
+                    <>
+                      <Button
+                        label="OK"
+                        onClick={() => setModalOpen(false)}
+                        ref={modalPrimaryButtonRef}
+                      />
+                      <Button
+                        color="secondary"
+                        label="Close"
+                        onClick={() => setModalOpen(false)}
+                        priority="outline"
+                        ref={modalCloseButtonRef}
+                      />
+                    </>
+                  )
+              }
+            </ModalFooter>
+          </Modal>
+        )}
+      </div>
+    </>
+  );
+});
 ```
 
 ## Sizes
@@ -577,7 +577,7 @@ React.createElement(() => {
       </div>
     </React.Fragment>
   );
-})
+});
 ```
 
 On top of that, the modal can adjust to the width of its content.
@@ -631,7 +631,7 @@ React.createElement(() => {
       </div>
     </React.Fragment>
   );
-})
+});
 ```
 
 👉 Please note the auto width may not function correctly in combination with

diff --git a/src/components/Popover/README.md b/src/components/Popover/README.md
@@ -251,7 +251,7 @@ React.createElement(() => {
         <div
           style={{
             position: 'relative',
-            width: '40rem',
+            width: '60rem',
             height: '20rem',
             paddingBlock: '7rem',
             textAlign: 'center',

diff --git a/src/components/ScrollView/README.md b/src/components/ScrollView/README.md
@@ -16,7 +16,7 @@ import { ScrollView } from '@react-ui-org/react-ui';
 And use it:
 
 ```docoff-react-preview
-<div style={{height: '10em'}}>
+<docoff-placeholder height="200px">
   <ScrollView>
     <div>
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
@@ -60,7 +60,7 @@ And use it:
       nunc.
     </div>
   </ScrollView>
-</div>
+</docoff-placeholder>
 ```
 
 See [API](#api) for all available options.
@@ -97,7 +97,7 @@ See [API](#api) for all available options.
 You can suppress the system scrollbar and display arrow controls instead.
 
 ```docoff-react-preview
-<div style={{height: '10em'}}>
+<docoff-placeholder height="200px">
   <ScrollView arrows scrollbar={false}>
     <div>
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
@@ -141,7 +141,7 @@ You can suppress the system scrollbar and display arrow controls instead.
       nunc.
     </div>
   </ScrollView>
-  </div>
+</docoff-placeholder>
 ```
 
 ## Horizontal Scrolling
@@ -495,7 +495,7 @@ If you provide [ref], it is forwarded to the scrolling viewport native HTML
 
 ## API
 
-<Props table of={ScrollView} />
+<docoff-react-props src="/components/ScrollView/ScrollView.jsx"></docoff-react-props>
 
 [linear gradients]: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
 [React synthetic events]: https://reactjs.org/docs/events.html