@react-ui-org/react-ui 0.52.0 → 0.53.0

package/src/{lib/components/TextLink/README.mdx → components/TextLink/README.md}

@@ -1,17 +1,5 @@
----
-name: TextLink
-menu: 'Actions'
-route: /components/text-link
----
-
 # TextLink
 
-import {
-  Playground,
-  Props,
-} from 'docz'
-import { TextLink } from '../..'
-
 TextLink allows users to follow navigation.
 
 ## Basic Usage
@@ -24,18 +12,18 @@ import { TextLink } from '@react-ui-org/react-ui';
 
 And use it:
 
-<Playground>
-  <TextLink
-    href="/contribute/guidelines"
-    label="How can I contribute to React UI?"
-  />
-</Playground>
+```docoff-react-preview
+<TextLink
+  href="/docs/contribute/general-guidelines"
+  label="How can I contribute to React UI?"
+/>
+```
 
 See [API](#api) for all available options.
 
 ## General Guidelines
 
-**Avoid using links for actions**, use a [Button](/components/button)
+**Avoid using links for actions**, use a [Button](/components/Button/)
 instead. This is because users expect navigation to happen when clicking on
 something what looks like a link.
 
@@ -44,17 +32,17 @@ something what looks like a link.
 It's common to use custom function for routing within SPAs. Use the
 `onClick` option to provide such function.
 
-<Playground>
-  <TextLink
-    href="/contribute/guidelines"
-    label="This link is controlled by custom function"
-    onClick={(event) => {
-      event.preventDefault();
-      alert('You will be redirected.')
-      window.location = event.currentTarget.getAttribute('href');
-    }}
-  />
-</Playground>
+```docoff-react-preview
+<TextLink
+  href="/docs/contribute/general-guidelines"
+  label="This link is controlled by custom function"
+  onClick={(event) => {
+    event.preventDefault();
+    alert('You will be redirected.')
+    window.location = event.currentTarget.getAttribute('href');
+  }}
+/>
+```
 
 ## Forwarding HTML Attributes
 
@@ -69,7 +57,7 @@ accessibility.
 
 ## API
 
-<Props table of={TextLink} />
+<docoff-react-props src="/components/TextLink/TextLink.jsx"></docoff-react-props>
 
 ## Theming
 

package/src/{lib/components/Toggle/README.mdx → components/Toggle/README.md}

@@ -1,19 +1,7 @@
----
-name: Toggle
-menu: 'Inputs'
-route: /components/toggle
----
-
 # Toggle
 
 Toggle switches things on and off.
 
-import {
-  Playground,
-  Props,
-} from 'docz'
-import { Toggle } from '../..'
-
 ## Basic Usage
 
 To implement the Toggle component, you need to import it first:
@@ -24,18 +12,18 @@ import { Toggle } from '@react-ui-org/react-ui';
 
 And use it:
 
-<Playground>
-  {() => {
-    const [studioQuality, setStudioQuality] = React.useState(true);
-    return (
-      <Toggle
-        checked={studioQuality}
-        label="Listen in studio quality"
-        onChange={() => setStudioQuality(!studioQuality)}
-      />
-    );
-  }}
-</Playground>
+```docoff-react-preview
+React.createElement(() => {
+  const [studioQuality, setStudioQuality] = React.useState(true);
+  return (
+    <Toggle
+      checked={studioQuality}
+      label="Listen in studio quality"
+      onChange={() => setStudioQuality(!studioQuality)}
+    />
+  );
+});
+```
 
 See [API](#api) for all available options.
 
@@ -44,7 +32,7 @@ See [API](#api) for all available options.
 - Use the toggle only for boolean (true/false) input **with an immediate effect
   (without confirmation)**. To toggle things on or off in forms that require to
   be submitted by a button, use rather the
-  [CheckboxField](/components/checkbox-field) component.
+  [CheckboxField](/components/CheckboxField) component.
 
 - **Use positive wording for the toggle label,** so that it's clear what will
   happen when the user turns on the toggle. Avoid negations such as “Don't send
@@ -63,64 +51,64 @@ See [API](#api) for all available options.
 - The toggle is designed for **switching things on and off.** Don't use it to
   switch between two different things that cannot be described as on or off
   using a single label, e.g. different viewing modes. In such cases, consider
-  using the [ButtonGroup](/components/button-group) component.
+  using the [ButtonGroup](/components/ButtonGroup) component.
 
 ## Help Text
 
 You may provide an additional help text to clarify what will be the impact of
 turning the toggle on or off.
 
-<Playground>
-  {() => {
-    const [studioQuality, setStudioQuality] = React.useState(true);
-    return (
-      <Toggle
-        checked={studioQuality}
-        helpText={
-          'Unrivaled audio quality. Uses the MQA audio format. '
-          + 'Transfers a lot of data.'
-        }
-        label="Listen in studio quality"
-        onChange={() => setStudioQuality(!studioQuality)}
-      />
-    );
-  }}
-</Playground>
+```docoff-react-preview
+React.createElement(() => {
+  const [studioQuality, setStudioQuality] = React.useState(true);
+  return (
+    <Toggle
+      checked={studioQuality}
+      helpText={
+        'Unrivaled audio quality. Uses the MQA audio format. '
+        + 'Transfers a lot of data.'
+      }
+      label="Listen in studio quality"
+      onChange={() => setStudioQuality(!studioQuality)}
+    />
+  );
+});
+```
 
 ## Label Options
 
 In some cases, it may be convenient to visually hide the toggle label. The label
 remains accessible to assistive technologies.
 
-<Playground>
-  {() => {
-    const [studioQuality, setStudioQuality] = React.useState(true);
-    return (
-      <Toggle
-        checked={studioQuality}
-        isLabelVisible={false}
-        label="You cannot see this"
-        onChange={() => setStudioQuality(!studioQuality)}
-      />
-    );
-  }}
-</Playground>
+```docoff-react-preview
+React.createElement(() => {
+  const [studioQuality, setStudioQuality] = React.useState(true);
+  return (
+    <Toggle
+      checked={studioQuality}
+      isLabelVisible={false}
+      label="You cannot see this"
+      onChange={() => setStudioQuality(!studioQuality)}
+    />
+  );
+});
+```
 
 It's also possible to display the label before the input:
 
-<Playground>
-  {() => {
-    const [studioQuality, setStudioQuality] = React.useState(true);
-    return (
-      <Toggle
-        checked={studioQuality}
-        label="Listen in studio quality"
-        labelPosition="before"
-        onChange={() => setStudioQuality(!studioQuality)}
-      />
-    );
-  }}
-</Playground>
+```docoff-react-preview
+React.createElement(() => {
+  const [studioQuality, setStudioQuality] = React.useState(true);
+  return (
+    <Toggle
+      checked={studioQuality}
+      label="Listen in studio quality"
+      labelPosition="before"
+      onChange={() => setStudioQuality(!studioQuality)}
+    />
+  );
+});
+```
 
 ## States
 
@@ -131,51 +119,51 @@ should always **provide a validation message for states other than valid** so
 users know what happened and what action they should take or what options they
 have.
 
-<Playground>
-  {() => {
-    const [studioQuality, setStudioQuality] = React.useState(true);
-    return (
-      <>
-        <Toggle
-          checked={studioQuality}
-          label="Listen in studio quality"
-          onChange={() => setStudioQuality(!studioQuality)}
-          validationState="valid"
-        />
-        <Toggle
-          checked={studioQuality}
-          label="Listen in studio quality"
-          onChange={() => setStudioQuality(!studioQuality)}
-          validationState="warning"
-          validationText={
-            'Looks like you are connected over cellular network. '
-            + 'Please make sure you know what you are doing.'
-          }
-        />
-        <Toggle
-          checked={studioQuality}
-          label="Listen in studio quality"
-          onChange={() => setStudioQuality(!studioQuality)}
-          validationState="invalid"
-          validationText="Please upgrade your plan to make this option available."
-        />
-      </>
-    );
-  }}
-</Playground>
+```docoff-react-preview
+React.createElement(() => {
+  const [studioQuality, setStudioQuality] = React.useState(true);
+  return (
+    <>
+      <Toggle
+        checked={studioQuality}
+        label="Listen in studio quality"
+        onChange={() => setStudioQuality(!studioQuality)}
+        validationState="valid"
+      />
+      <Toggle
+        checked={studioQuality}
+        label="Listen in studio quality"
+        onChange={() => setStudioQuality(!studioQuality)}
+        validationState="warning"
+        validationText={
+          'Looks like you are connected over cellular network. '
+          + 'Please make sure you know what you are doing.'
+        }
+      />
+      <Toggle
+        checked={studioQuality}
+        label="Listen in studio quality"
+        onChange={() => setStudioQuality(!studioQuality)}
+        validationState="invalid"
+        validationText="Please upgrade your plan to make this option available."
+      />
+    </>
+  );
+});
+```
 
 ### Disabled State
 
 Disabled state makes the input unavailable.
 
-<Playground>
-  <Toggle label="Disabled toggle" disabled />
-  <Toggle
-    label="Disabled toggle, checked"
-    disabled
-    checked
-  />
-</Playground>
+```docoff-react-preview
+<Toggle label="Disabled toggle" disabled />
+<Toggle
+  label="Disabled toggle, checked"
+  disabled
+  checked
+/>
+```
 
 ## Forwarding HTML Attributes
 
@@ -194,11 +182,11 @@ If you provide [ref], it is forwarded to the native HTML `<input>` element.
 
 ## API
 
-<Props table of={Toggle} />
+<docoff-react-props src="/components/Toggle/Toggle.jsx"></docoff-react-props>
 
 ## Theming
 
-Head to [Forms Theming](/customize/theming/forms) to see shared form theming
+Head to [Forms Theming](/docs/customize/theming/forms) to see shared form theming
 options. On top of that, the following options are available for Toggle.
 
 | Custom Property                                                    | Description                                    |