raccoongang · viktorrusakov · Mar 9, 2023 · Mar 13, 2023 · Mar 13, 2023 · Mar 14, 2023
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -802,8 +802,8 @@ The following subcomponents have been added / reworked:
 
 * fix: update image sizing according to figma design
 
-Co-authored-by: vlasovmichael <[email protected]>
-Co-authored-by: vzadorozhnii <[email protected]>
+Co-authored-by: vlasovmichael \<[email protected]>
+Co-authored-by: vzadorozhnii \<[email protected]>
 
 
 

diff --git a/README.md b/README.md
@@ -330,7 +330,7 @@ Describe your component here and give usage examples.
 
 ### Basic Usage
 
-```jsx live
+```jsx live=true
 <MyComponent>
   Hello!
 </MyComponent>

diff --git a/component-generator/templates/README.md b/component-generator/templates/README.md
@@ -14,7 +14,7 @@ Describe your component here and give usage examples.
 
 ### Basic Usage
 
-```jsx live
+```jsx live=true
 <componentName>
   Hello!
 </componentName>

diff --git a/docs/decisions/0016-component-generator-script.rst b/docs/decisions/0016-component-generator-script.rst
@@ -39,7 +39,7 @@ where ``MyComponent`` is the name of the new component. The script will perform
 
 MyComponent
 ├── index.jsx              # contains component definition and its export
-├── README.md              # contains basic frontmatter with jsx live block that renders the component
+├── README.md              # contains basic frontmatter with jsx live=true block that renders the component
 ├── MyComponent.scss       # contains empty CSS class for new component
 ├── _variables.scss        # empty file for SASS variables definitions
 └── MyComponent.test.jsx   # contains single snapshot test

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/ActionRow/README.md b/src/ActionRow/README.md
@@ -19,7 +19,7 @@ in a row in a control bar or nav.
 ActionRow assumes that its last child is the primary action and lays out actions so that the last item is in a primary location. If horizontal, the primary action sits on the right. If stacked, the primary action sits at the top of the stack (this is done via `flex-direction: column-reverse;`).
 ## Basic Usage
 
-```jsx live
+```jsx live=true
 <ActionRow>
   <Button variant="tertiary">
     Cancel
@@ -34,7 +34,7 @@ ActionRow assumes that its last child is the primary action and lays out actions
 
 ActionRow can also be used with a helper component ``ActionRow.Spacer`` to insert empty space between children
 
-```jsx live
+```jsx live=true
 <ActionRow>
   <Form.Checkbox className="flex-column flex-sm-row">Don't ask me again.</Form.Checkbox>
   <ActionRow.Spacer />
@@ -50,7 +50,7 @@ ActionRow can also be used with a helper component ``ActionRow.Spacer`` to inser
 ## Stacked Usage
 
 
-```jsx live
+```jsx live=true
 <ActionRow isStacked>
   <p className="x-small">
     Bespoke leggings yuccie, portland umami readymade craft beer vaporware sriracha.

diff --git a/src/Alert/README.md b/src/Alert/README.md
@@ -25,7 +25,7 @@ This component utilizes and extends the `Alert` component from react-bootstrap.<
 
 ## Basic Usage
 
-```jsx live
+```jsx live=true
 <>
 <Alert variant="success">
   This is a "success" alert with{' '}
@@ -58,7 +58,7 @@ The stacked variant should be used for:
 - Extra-small breakpoint and below
 ---
 
-```jsx live
+```jsx live=true
 <>
   <Alert
     variant="info"
@@ -115,7 +115,7 @@ The stacked variant should be used for:
 
 ### Variants
 
-```jsx live
+```jsx live=true
 <>
 <Alert variant="success" dismissible icon={CheckCircle}>
   <Alert.Heading>Hey, nice to see you</Alert.Heading>
@@ -146,7 +146,7 @@ The stacked variant should be used for:
 
 ### Kitchen Sink
 
-```jsx live
+```jsx live=true
 <Alert
   variant="success"
   actions={[

diff --git a/src/Annotation/README.md b/src/Annotation/README.md
@@ -19,7 +19,7 @@ Display informative text related to an object on screen. Unlike the tooltip an a
 
 ## Basic Usage
 
-```jsx live
+```jsx live=true
 <>
   <Annotation>
     Success variant
@@ -56,7 +56,7 @@ Display informative text related to an object on screen. Unlike the tooltip an a
 
 ## Referring to other elements
 
-```jsx live
+```jsx live=true
 () => {
   const [arrowPlacement, setArrowPlacement] = useState('left')
   const wrapperClass = arrowPlacement === 'top' || arrowPlacement === 'bottom' ? 'flex-column' : '';

diff --git a/src/Avatar/README.md b/src/Avatar/README.md
@@ -20,7 +20,7 @@ It is used in the global navigation’s user menu and may also be used to indica
 
 ## Basic Usage
 
-```jsx live
+```jsx live=true
 <div className="bg-light p-2">
   <Avatar size="xxl" />{' '}
   <Avatar size="xl" />{' '}
@@ -34,7 +34,7 @@ It is used in the global navigation’s user menu and may also be used to indica
 
 ## Huge
 
-```jsx live
+```jsx live=true
 <>
   <Avatar size="huge" />
 </>

diff --git a/src/AvatarButton/README.md b/src/AvatarButton/README.md
@@ -17,7 +17,7 @@ A button that contains the user’s Avatar.
 
 ## Basic Usage
 
-```jsx live
+```jsx live=true
 <>
   <div>
     <AvatarButton size="lg" src="https://picsum.photos/128/128/">Casey</AvatarButton>
@@ -34,7 +34,7 @@ A button that contains the user’s Avatar.
 
 ## With Dropdown
 
-```jsx live
+```jsx live=true
 <Dropdown>
   <Dropdown.Toggle as={AvatarButton} src="https://picsum.photos/128/128">
     Casey
@@ -53,7 +53,7 @@ A button that contains the user’s Avatar.
 
 Props set on Dropdown.Toggle get passed through to the "as" component
 
-```jsx live
+```jsx live=true
 <Dropdown>
   <Dropdown.Toggle as={AvatarButton} size="sm" src="https://picsum.photos/128/128/">
     Casey
@@ -74,7 +74,7 @@ Props set on Dropdown.Toggle get passed through to the "as" component
 
 For use in mobile viewports or constrained views.
 
-```jsx live
+```jsx live=true
 <>
   <div>
     <AvatarButton showLabel={false} size="lg" src="https://picsum.photos/128/128/">Casey</AvatarButton>

diff --git a/src/Badge/README.md b/src/Badge/README.md
@@ -26,7 +26,7 @@ Badges are composed of text and an accompanying indicator color, and are typical
 
 ## Basic Usage
 
-```jsx live
+```jsx live=true
 <>
   <Badge variant="primary">Primary</Badge>{' '}
   <Badge variant="secondary">Secondary</Badge>{' '}

diff --git a/src/Breadcrumb/README.md b/src/Breadcrumb/README.md
@@ -16,7 +16,7 @@ Use as a secondary navigation pattern to help convey hierarchy and enable naviga
 
 ## Basic Usage
 
-```jsx live
+```jsx live=true
 () => {
   const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
 
@@ -35,7 +35,7 @@ Use as a secondary navigation pattern to help convey hierarchy and enable naviga
 
 ### Basic Usage (Mobile View)
 
-```jsx live
+```jsx live=true
 <Breadcrumb ariaLabel="Breadcrumb mobile view"
   links={[
     { label: 'Link 1', href: '/link-1' },
@@ -48,7 +48,7 @@ Use as a secondary navigation pattern to help convey hierarchy and enable naviga
 
 ### Basic Usage (Inverse Palette)
 
-```jsx live
+```jsx live=true
 () => {
   const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
 
@@ -75,7 +75,7 @@ This behaviour can be customized with `linkAs` prop, the example below uses Gats
 
 Note that `links` list contains objects with different keys compared to the example above, specifically `href` key is replaced with `to`, that's because Gatsby's `Link` expects its destination to be set through `to` prop (same as react-router's `Link`), internally `Breadcrumb` passes down these objects (except `label` attribute) as props to the `linkAs` element. 
 
-```jsx live
+```jsx live=true
 () => {
   const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
 
@@ -94,7 +94,7 @@ Note that `links` list contains objects with different keys compared to the exam
 
 ## With active label
 
-```jsx live
+```jsx live=true
 () => {
   const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
 
@@ -114,7 +114,7 @@ Note that `links` list contains objects with different keys compared to the exam
 
 ## With custom spacer
 
-```jsx live
+```jsx live=true
 () => {
   const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
 

diff --git a/src/Bubble/README.md b/src/Bubble/README.md
@@ -15,7 +15,7 @@ Represents the filled circle with a number of an icon, supporting the usual colo
 
 ## Basic Usage
 
-```jsx live
+```jsx live=true
 () => {
   return (
     <>
@@ -54,7 +54,7 @@ Represents the filled circle with a number of an icon, supporting the usual colo
 
 ### Disabled variant
 
-```jsx live
+```jsx live=true
 () => {
   return (
     <Stack direction="horizontal" gap={4} className="mb-2">
@@ -73,7 +73,7 @@ Represents the filled circle with a number of an icon, supporting the usual colo
 
 In the case of long content use `expandable` prop. It adds padding to `Bubble`. Padding value is configurable through `scss` variables.
 
-```jsx live
+```jsx live=true
 () => {
   {/* start example state */}
   const [isExpandable, setIsExpandable] = useState(true);

diff --git a/src/Button/README.md b/src/Button/README.md
@@ -15,7 +15,7 @@ notes: |
 This component utilizes `Button` from React-Bootstrap and extends it with an ability to add icons before and after button label, see [below](#with-icons-before-or-after) for usage example.<br/> <a href="https://react-bootstrap.github.io/components/buttons/" target="_blank" rel="noopener noreferrer"> See React-Bootstrap for additional documentation. </a>
 
 ## Core Buttons
-```jsx live
+```jsx live=true
 <>
   <Button variant="brand" className="mb-2 mb-sm-0">Brand</Button>{' '}
   <Button variant="outline-brand" className="mb-2 mb-sm-0">Outline Brand</Button>{' '}
@@ -25,7 +25,7 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
 </>
 ```
 ## Core Buttons (Inverse Pallete)
-```jsx live
+```jsx live=true
 <div className="bg-dark-700 p-4">
   <Button variant="inverse-brand" className="mb-2 mb-sm-0">Brand</Button>{' '}
   <Button variant="inverse-outline-brand" className="mb-2 mb-sm-0">Outline Brand</Button>{' '}
@@ -36,7 +36,7 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
 ```
 
 ## Utility Buttons
-```jsx live
+```jsx live=true
 <>
   <div className="mb-2">
     <Button variant="success" className="mb-2 mb-sm-0">Success</Button>{' '}
@@ -56,7 +56,7 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
 
 ## Size
 
-```jsx live
+```jsx live=true
 <>
   <div className="mb-2">
     <Button variant="primary" size="lg" className="mb-2 mb-sm-0">
@@ -85,7 +85,7 @@ This component utilizes `Button` from React-Bootstrap and extends it with an abi
 
 Use inline size buttons for when a button sits with a line of text.
 
-```jsx live
+```jsx live=true
 <>
   <p>
     <span className="mr-1">2 items selected.</span>
@@ -97,7 +97,7 @@ Use inline size buttons for when a button sits with a line of text.
 
 ## Block Buttons
 
-```jsx live
+```jsx live=true
 <>
   <Button variant="primary" size="lg" block>
     Block level button
@@ -110,7 +110,7 @@ Use inline size buttons for when a button sits with a line of text.
 
 ### Disabled
 
-```jsx live
+```jsx live=true
 <>
   <Button variant="primary" disabled>Primary disabled</Button>
   <Button variant="secondary" disabled>Secondary disabled</Button>
@@ -120,15 +120,15 @@ Use inline size buttons for when a button sits with a line of text.
 
 For link to be `disabled`, it must have href defined with some value.
 
-```jsx live
+```jsx live=true
 <>
   <Button as='a' disabled>No href</Button>
   <Button as='a' href='' disabled>Empty string href</Button>
 </>
 ```
 
 ### With Icons before or after
-```jsx live
+```jsx live=true
 <>
   <Button variant="brand" iconBefore={ArrowBack} className="mb-2 mb-sm-0">
     Brand
@@ -149,7 +149,7 @@ For link to be `disabled`, it must have href defined with some value.
 ```
 
 ### With a Spinner
-```jsx live
+```jsx live=true
 <>
   <Button variant="primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
     <Spinner animation="border" />
@@ -178,13 +178,13 @@ For link to be `disabled`, it must have href defined with some value.
 
 ### Basic Usage
 
-```jsx live
+```jsx live=true
 <Button.Deprecated className="btn-primary">Hello World!</Button.Deprecated>
 ```
 
 ### Color Variants
 
-```jsx live
+```jsx live=true
 <div>
   <Button.Deprecated className="btn-primary">Primary</Button.Deprecated>
   <Button.Deprecated className="btn-success">Success</Button.Deprecated>
@@ -196,7 +196,7 @@ For link to be `disabled`, it must have href defined with some value.
 
 ### Outline Variants
 
-```jsx live
+```jsx live=true
 <div>
   <Button.Deprecated className="btn-outline-primary">Primary</Button.Deprecated>
   <Button.Deprecated className="btn-outline-success">Success</Button.Deprecated>
@@ -206,7 +206,7 @@ For link to be `disabled`, it must have href defined with some value.
 
 ### Inverse Variants
 
-```jsx live
+```jsx live=true
 <div className="bg-gray-700 p-3">
   <Button.Deprecated className="btn-inverse-primary">Primary</Button.Deprecated>
   <Button.Deprecated className="btn-inverse-success">Success</Button.Deprecated>
@@ -216,7 +216,7 @@ For link to be `disabled`, it must have href defined with some value.
 
 ### Link Variant
 
-```jsx live
+```jsx live=true
 <div className="bg-gray-200 p-3">
   <Button.Deprecated className="btn-link">Link with button container</Button.Deprecated>
   <br />