fix specs

user-interviews · Mar 26, 2024 · e819880 · e819880
1 parent 9e94a56
commit e819880
Show file tree

Hide file tree

Showing 6 changed files with 205 additions and 4 deletions.
diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap
@@ -3465,13 +3465,151 @@ exports[`Storyshots Components/Form Default 1`] = `
 </form>
 `;
 
+exports[`Storyshots Components/Form Elements/CheckboxButton Indeterminate 1`] = `
+<div
+  style={
+    Object {
+      "display": "flex",
+      "flexDirection": "column",
+      "gap": "8px",
+    }
+  }
+>
+  <label
+    htmlFor="select-all"
+    style={
+      Object {
+        "display": "flex",
+        "gap": "4px",
+      }
+    }
+  >
+    <input
+      checked={false}
+      className=""
+      id="select-all"
+      onChange={[Function]}
+      type="checkbox"
+    />
+    Toggle all
+  </label>
+  <label
+    htmlFor="1"
+    style={
+      Object {
+        "display": "flex",
+        "gap": "4px",
+      }
+    }
+  >
+    <input
+      checked={false}
+      className=""
+      id="1"
+      onChange={[Function]}
+      type="checkbox"
+      value="1"
+    />
+    Item 
+    1
+  </label>
+  <label
+    htmlFor="2"
+    style={
+      Object {
+        "display": "flex",
+        "gap": "4px",
+      }
+    }
+  >
+    <input
+      checked={false}
+      className=""
+      id="2"
+      onChange={[Function]}
+      type="checkbox"
+      value="2"
+    />
+    Item 
+    2
+  </label>
+  <label
+    htmlFor="3"
+    style={
+      Object {
+        "display": "flex",
+        "gap": "4px",
+      }
+    }
+  >
+    <input
+      checked={false}
+      className=""
+      id="3"
+      onChange={[Function]}
+      type="checkbox"
+      value="3"
+    />
+    Item 
+    3
+  </label>
+  <a
+    href="https://css-tricks.com/indeterminate-checkboxes/"
+    rel="noreferrer"
+    target="_blank"
+  >
+    Indeterminate checkboxes
+  </a>
+</div>
+`;
+
 exports[`Storyshots Components/Form Elements/CheckboxButton Primary 1`] = `
 <input
   className=""
   type="checkbox"
 />
 `;
 
+exports[`Storyshots Components/Form Elements/CheckboxButtonGroup Primary 1`] = `
+<div
+  className="CheckboxButtonGroup CheckboxButtonGroup--row CheckboxButtonGroup--row--compact"
+  id="checkbox-button-group"
+>
+  <label
+    className="FormControlLabel FormControlLabel--bordered"
+    htmlFor="value-1"
+  >
+    <span
+      className="FormControlLabel__label"
+    >
+      <input
+        className="FormControlLabel__control"
+        id="value-1"
+        type="checkbox"
+        value="1"
+      />
+      Label 1
+    </span>
+  </label>
+  <label
+    className="FormControlLabel FormControlLabel--bordered"
+    htmlFor="value-2"
+  >
+    <span
+      className="FormControlLabel__label"
+    >
+      <input
+        className="FormControlLabel__control"
+        id="value-2"
+        type="checkbox"
+        value="2"
+      />
+      Label 2
+    </span>
+  </label>
+</div>
+`;
+
 exports[`Storyshots Components/Form Elements/Form Control Label Checkbox 1`] = `
 <label
   className="FormControlLabel"
@@ -25712,6 +25850,28 @@ Array [
 ]
 `;
 
+exports[`Storyshots Layouts/CardStack Primary 1`] = `
+<div
+  className="CardStack"
+>
+  <section
+    className="Card"
+  >
+    Card three
+  </section>
+  <section
+    className="Card"
+  >
+    Card two
+  </section>
+  <section
+    className="Card"
+  >
+    Card three
+  </section>
+</div>
+`;
+
 exports[`Storyshots Layouts/Container Auto Layout Columns 1`] = `
 <div
   className="container"
@@ -26087,6 +26247,43 @@ exports[`Storyshots Layouts/Container Offsetting Columns 1`] = `
 </div>
 `;
 
+exports[`Storyshots Layouts/Container Primary 1`] = `
+<div
+  className="container"
+>
+  <div
+    className="row"
+  >
+    <div
+      className="col"
+    >
+      <section
+        className="Card"
+      >
+        <div
+          className="Card__header"
+        >
+          <h2
+            className="Card__title"
+          >
+            Fluid container with breakpoints
+          </h2>
+        </div>
+        You can set breakpoints for the 
+        <code>
+          fluid
+        </code>
+         prop. Setting it to a breakpoint 
+        <code>
+          ['sm', 'md', 'lg', 'xl', 'xxl']
+        </code>
+         will set the Container as fluid until the specified breakpoint.
+      </section>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Layouts/Container Responsive Grids 1`] = `
 Array [
   <div
@@ -26263,7 +26460,7 @@ exports[`Storyshots Layouts/Container Setting Column Widths In Row 1`] = `
     <code>
       &lt;Col xs={6} /&gt;
     </code>
-     size will be overriden by
+     size will be overridden by
     <code>
       &lt;Row md={4} /&gt;
     </code>
@@ -26355,7 +26552,7 @@ exports[`Storyshots Layouts/Container Setting One Column Width 1`] = `
       </section>
     </div>
     <div
-      className="col-8"
+      className="col-1"
     >
       <section
         className="Card"
@@ -26370,7 +26567,7 @@ exports[`Storyshots Layouts/Container Setting One Column Width 1`] = `
           </h2>
         </div>
         <code>
-          xs={8}
+          xs={1}
         </code>
       </section>
     </div>

diff --git a/src/CardStack/CardStack.jsx b/src/CardStack/CardStack.jsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 

diff --git a/src/CardStack/CardStack.stories.jsx b/src/CardStack/CardStack.stories.jsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Card, { CardSizes } from 'src/Card';
 import { CardStack } from 'src/CardStack';
 

diff --git a/src/CheckboxButton/CheckboxButton.stories.jsx b/src/CheckboxButton/CheckboxButton.stories.jsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import CheckboxButton from './CheckboxButton';
 
 export default {

diff --git a/src/CheckboxButtonGroup/CheckboxButtonGroup.stories.jsx b/src/CheckboxButtonGroup/CheckboxButtonGroup.stories.jsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import CheckboxButton from '../CheckboxButton/CheckboxButton';
 import FormControlLabel from '../FormControlLabel';
 import CheckboxButtonGroup from './CheckboxButtonGroup';

diff --git a/src/Container/Container.stories.jsx b/src/Container/Container.stories.jsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Card from 'src/Card';
 import { Col, Container, Row } from 'src/Container';