wjec-one 4.0.21 → 4.1.0

package/README.md

@@ -1054,7 +1054,7 @@ Here is a list of our components along with some documentation for them.
             <td>buffer</td>
             <td><code>number</code></td>
             <td>false</td>
-            <td><code>2</code></td>
+            <td><code>1</code></td>
             <td>The number of extra slides to render at either end of the Carousel when using infinite rotation</td>
           </tr>
         </tbody>
@@ -1422,60 +1422,6 @@ Once the component unmounts, React will set `ref.current` to `null`
           </tr>
         </tbody>
       </table></details>
-<details><summary id="draganddroplist">DragAndDropList</summary>No description provided<h3>Props</h3><table><thead>
-      <tr>
-        <th>Name</th>
-        <th>Type</th>
-        <th>Required</th>
-        <th>Default</th>
-        <th>Description</th>
-      </tr>
-    </thead><tbody>
-          <tr>
-            <td>gap</td>
-            <td><code>any</code></td>
-            <td>false</td>
-            <td><code>0</code></td>
-            <td>-</td>
-          </tr>
-        </tbody>
-      <tbody>
-          <tr>
-            <td>items</td>
-            <td><code>T[]</code></td>
-            <td>true</td>
-            <td><code>-</code></td>
-            <td>-</td>
-          </tr>
-        </tbody>
-      <tbody>
-          <tr>
-            <td>onDrop</td>
-            <td><code>(items: T[]) => void</code></td>
-            <td>false</td>
-            <td><code>-</code></td>
-            <td>-</td>
-          </tr>
-        </tbody>
-      <tbody>
-          <tr>
-            <td>template</td>
-            <td><code>FC<{ item: T; Handle: FC<PropsWithChildren<{ position?: { bottom?: any; left?: any; right?: any; top?: any; }; positionType?: "absolute" , "relative"; }>>; index: number; sortedItems: T[]; }></code></td>
-            <td>false</td>
-            <td><code>({ Handle, item }) => <Handle>{item.toString()}</Handle></code></td>
-            <td>-</td>
-          </tr>
-        </tbody>
-      <tbody>
-          <tr>
-            <td>id</td>
-            <td><code>string</code></td>
-            <td>false</td>
-            <td><code>-</code></td>
-            <td>The identifier that will be passed through to the underlying HTML element</td>
-          </tr>
-        </tbody>
-      </table></details>
 <details><summary id="emphasis">Emphasis</summary>No description provided<h3>Props</h3><table><thead>
       <tr>
         <th>Name</th>
@@ -1487,7 +1433,7 @@ Once the component unmounts, React will set `ref.current` to `null`
     </thead><tbody>
           <tr>
             <td>color</td>
-            <td><code>string</code></td>
+            <td><code>Color</code></td>
             <td>false</td>
             <td><code>-</code></td>
             <td>-</td>
@@ -1804,7 +1750,7 @@ Once the component unmounts, React will set `ref.current` to `null`
       <tbody>
           <tr>
             <td>width</td>
-            <td><code>any</code></td>
+            <td><code>Width<string , number></code></td>
             <td>false</td>
             <td><code>-</code></td>
             <td>-</td>
@@ -2909,7 +2855,7 @@ The identifier that will be passed through to the underlying HTML element</td>
             <td>revealPassword</td>
             <td><code>boolean</code></td>
             <td>false</td>
-            <td><code>show === undefined ? false : show</code></td>
+            <td><code>false</code></td>
             <td>Determines whether the value of the Password field should be visible</td>
           </tr>
         </tbody>
@@ -3192,7 +3138,7 @@ The identifier that will be passed through to the underlying HTML element</td>
       <tbody>
           <tr>
             <td>highlightColor</td>
-            <td><code>string</code></td>
+            <td><code>Color</code></td>
             <td>false</td>
             <td><code>ColorPalette.highlight</code></td>
             <td>Determines the color used to highlight the Select component if `highlighted="true"`
@@ -3367,20 +3313,10 @@ The identifier that will be passed through to the underlying HTML element</td>
             <td>-</td>
           </tr>
         </tbody>
-      <tbody>
-          <tr>
-            <td>gridArea</td>
-            <td><code>string</code></td>
-            <td>false</td>
-            <td><code>-</code></td>
-            <td>Determines which area of the relevant CSS grid template the TextArea is assigned to
-@deprecated gridArea has been deprecated because WJEC One components are intended to be layout agnostic</td>
-          </tr>
-        </tbody>
       <tbody>
           <tr>
             <td>height</td>
-            <td><code>any</code></td>
+            <td><code>Height<string , number></code></td>
             <td>false</td>
             <td><code>auto</code></td>
             <td>-</td>
@@ -3407,7 +3343,7 @@ The identifier that will be passed through to the underlying HTML element</td>
       <tbody>
           <tr>
             <td>maxHeight</td>
-            <td><code>any</code></td>
+            <td><code>Height<string , number></code></td>
             <td>false</td>
             <td><code>100%</code></td>
             <td>-</td>
@@ -3416,7 +3352,7 @@ The identifier that will be passed through to the underlying HTML element</td>
       <tbody>
           <tr>
             <td>maxWidth</td>
-            <td><code>any</code></td>
+            <td><code>Width<string , number></code></td>
             <td>false</td>
             <td><code>100%</code></td>
             <td>-</td>
@@ -3479,7 +3415,7 @@ The identifier that will be passed through to the underlying HTML element</td>
       <tbody>
           <tr>
             <td>width</td>
-            <td><code>any</code></td>
+            <td><code>Width<string , number></code></td>
             <td>false</td>
             <td><code>100%</code></td>
             <td>-</td>
@@ -4242,7 +4178,7 @@ The identifier that will be passed through to the underlying HTML element</td>
     </thead><tbody>
           <tr>
             <td>backgroundColor</td>
-            <td><code>string</code></td>
+            <td><code>BackgroundColor</code></td>
             <td>false</td>
             <td><code>ColorPalette.Neutral</code></td>
             <td>The background color of the progress bar</td>
@@ -4251,7 +4187,7 @@ The identifier that will be passed through to the underlying HTML element</td>
       <tbody>
           <tr>
             <td>color</td>
-            <td><code>string</code></td>
+            <td><code>Color</code></td>
             <td>false</td>
             <td><code>ColorPalette.Primary</code></td>
             <td>The color of the current progress</td>
@@ -4460,7 +4396,7 @@ The identifier that will be passed through to the underlying HTML element</td>
             <td>actionButtonIcon</td>
             <td><code>(props: SVGProps<SVGSVGElement>) => SVGComponent</code></td>
             <td>false</td>
-            <td><code>-</code></td>
+            <td><code>actionType === 'negative' ? MinusIcon : ChevronRightIcon</code></td>
             <td>An icon that will be display for the action button</td>
           </tr>
         </tbody>
@@ -4620,7 +4556,7 @@ The identifier that will be passed through to the underlying HTML element</td>
       <tbody>
           <tr>
             <td>notification</td>
-            <td><code>NotificationProps</code></td>
+            <td><code>NotificationProps , Element</code></td>
             <td>false</td>
             <td><code>-</code></td>
             <td>A notification that will be displayed inside the modal</td>
@@ -4899,6 +4835,15 @@ The identifier that will be passed through to the underlying HTML element</td>
             <td>Determines the color of the Notifications title</td>
           </tr>
         </tbody>
+      <tbody>
+          <tr>
+            <td>variant</td>
+            <td><code>"error" , "success" , "info"</code></td>
+            <td>false</td>
+            <td><code>-</code></td>
+            <td>The semantic variant of the notification (e.g., `error`).</td>
+          </tr>
+        </tbody>
       <tbody>
           <tr>
             <td>ariaDescription</td>
@@ -4913,7 +4858,7 @@ The identifier that will be passed through to the underlying HTML element</td>
             <td>ariaCloseLabel</td>
             <td><code>string</code></td>
             <td>false</td>
-            <td><code>-</code></td>
+            <td><code>close</code></td>
             <td>-</td>
           </tr>
         </tbody>
@@ -5064,6 +5009,15 @@ The identifier that will be passed through to the underlying HTML element</td>
             <td>The title to be displayed at the top of the Notification</td>
           </tr>
         </tbody>
+      <tbody>
+          <tr>
+            <td>variant</td>
+            <td><code>"error" , "success" , "info"</code></td>
+            <td>false</td>
+            <td><code>-</code></td>
+            <td>The semantic variant of the notification (e.g., `error`).</td>
+          </tr>
+        </tbody>
       <tbody>
           <tr>
             <td>id</td>
@@ -5202,6 +5156,15 @@ The identifier that will be passed through to the underlying HTML element</td>
             <td>The title to be displayed at the top of the Notification</td>
           </tr>
         </tbody>
+      <tbody>
+          <tr>
+            <td>variant</td>
+            <td><code>"error" , "success" , "info"</code></td>
+            <td>false</td>
+            <td><code>-</code></td>
+            <td>The semantic variant of the notification (e.g., `error`).</td>
+          </tr>
+        </tbody>
       <tbody>
           <tr>
             <td>id</td>
@@ -5340,6 +5303,15 @@ The identifier that will be passed through to the underlying HTML element</td>
             <td>The title to be displayed at the top of the Notification</td>
           </tr>
         </tbody>
+      <tbody>
+          <tr>
+            <td>variant</td>
+            <td><code>"error" , "success" , "info"</code></td>
+            <td>false</td>
+            <td><code>-</code></td>
+            <td>The semantic variant of the notification (e.g., `error`).</td>
+          </tr>
+        </tbody>
       <tbody>
           <tr>
             <td>id</td>
@@ -5361,7 +5333,7 @@ The identifier that will be passed through to the underlying HTML element</td>
     </thead><tbody>
           <tr>
             <td>color</td>
-            <td><code>string</code></td>
+            <td><code>Color</code></td>
             <td>false</td>
             <td><code>-</code></td>
             <td>-</td>
@@ -5460,7 +5432,7 @@ The identifier that will be passed through to the underlying HTML element</td>
     </thead><tbody>
           <tr>
             <td>color</td>
-            <td><code>string</code></td>
+            <td><code>Color</code></td>
             <td>false</td>
             <td><code>-</code></td>
             <td>-</td>
@@ -5487,7 +5459,7 @@ The identifier that will be passed through to the underlying HTML element</td>
     </thead><tbody>
           <tr>
             <td>backgroundColor</td>
-            <td><code>Color</code></td>
+            <td><code>BackgroundColor , keyof ColorPalette</code></td>
             <td>false</td>
             <td><code>-</code></td>
             <td>CSS property for the backgroundColor</td>
@@ -5496,7 +5468,7 @@ The identifier that will be passed through to the underlying HTML element</td>
       <tbody>
           <tr>
             <td>color</td>
-            <td><code>Color</code></td>
+            <td><code>keyof ColorPalette , Color</code></td>
             <td>false</td>
             <td><code>-</code></td>
             <td>CSS property for the color</td>
@@ -5679,7 +5651,7 @@ The identifier that will be passed through to the underlying HTML element</td>
             <td>placement</td>
             <td><code>Placement</code></td>
             <td>false</td>
-            <td><code>-</code></td>
+            <td><code>bottom</code></td>
             <td>Determines the position of the Popup in relation to the toggle</td>
           </tr>
         </tbody>
@@ -5908,25 +5880,25 @@ The identifier that will be passed through to the underlying HTML element</td>
     </thead><tbody>
           <tr>
             <td>footer</td>
-            <td><code>FC<{}></code></td>
+            <td><code>FC</code></td>
             <td>false</td>
-            <td><code>-</code></td>
+            <td><code>React.Fragment</code></td>
             <td>-</td>
           </tr>
         </tbody>
       <tbody>
           <tr>
             <td>header</td>
-            <td><code>FC<{}></code></td>
+            <td><code>FC</code></td>
             <td>false</td>
-            <td><code>-</code></td>
+            <td><code>React.Fragment</code></td>
             <td>-</td>
           </tr>
         </tbody>
       <tbody>
           <tr>
             <td>margin</td>
-            <td><code>MarginProperty<number></code></td>
+            <td><code>Margin<string , number></code></td>
             <td>false</td>
             <td><code>auto</code></td>
             <td>-</td>
@@ -6061,7 +6033,7 @@ The identifier that will be passed through to the underlying HTML element</td>
       <tbody>
           <tr>
             <td>footer</td>
-            <td><code>FC<{}></code></td>
+            <td><code>FC</code></td>
             <td>false</td>
             <td><code>-</code></td>
             <td>-</td>
@@ -6070,7 +6042,7 @@ The identifier that will be passed through to the underlying HTML element</td>
       <tbody>
           <tr>
             <td>header</td>
-            <td><code>FC<{}></code></td>
+            <td><code>FC</code></td>
             <td>false</td>
             <td><code>-</code></td>
             <td>-</td>
@@ -6079,7 +6051,7 @@ The identifier that will be passed through to the underlying HTML element</td>
       <tbody>
           <tr>
             <td>margin</td>
-            <td><code>MarginProperty<number></code></td>
+            <td><code>Margin<string , number></code></td>
             <td>false</td>
             <td><code>-</code></td>
             <td>-</td>
@@ -6169,7 +6141,7 @@ The identifier that will be passed through to the underlying HTML element</td>
       <tbody>
           <tr>
             <td>styles</td>
-            <td><code>Interpolation<undefined> , ArrayInterpolation<any></code></td>
+            <td><code>Interpolation , ArrayInterpolation<any></code></td>
             <td>false</td>
             <td><code>-</code></td>
             <td>-</td>
@@ -6196,7 +6168,7 @@ The identifier that will be passed through to the underlying HTML element</td>
     </thead><tbody>
           <tr>
             <td>color</td>
-            <td><code>string</code></td>
+            <td><code>Color</code></td>
             <td>false</td>
             <td><code>-</code></td>
             <td>-</td>
@@ -6223,7 +6195,7 @@ The identifier that will be passed through to the underlying HTML element</td>
     </thead><tbody>
           <tr>
             <td>color</td>
-            <td><code>string</code></td>
+            <td><code>Color</code></td>
             <td>false</td>
             <td><code>-</code></td>
             <td>-</td>
@@ -6286,7 +6258,7 @@ The identifier that will be passed through to the underlying HTML element</td>
       <tbody>
           <tr>
             <td>padding</td>
-            <td><code>any</code></td>
+            <td><code>Padding<string , number></code></td>
             <td>false</td>
             <td><code>50px 30px 30px</code></td>
             <td>-</td>
@@ -6538,7 +6510,7 @@ The identifier that will be passed through to the underlying HTML element</td>
       <tbody>
           <tr>
             <td>padding</td>
-            <td><code>any</code></td>
+            <td><code>Padding<string , number></code></td>
             <td>false</td>
             <td><code>-</code></td>
             <td>-</td>
@@ -6781,7 +6753,7 @@ The identifier that will be passed through to the underlying HTML element</td>
     </thead><tbody>
           <tr>
             <td>color</td>
-            <td><code>string</code></td>
+            <td><code>Color</code></td>
             <td>false</td>
             <td><code>-</code></td>
             <td>-</td>
@@ -6927,7 +6899,7 @@ The identifier that will be passed through to the underlying HTML element</td>
             <td>sortedDirection</td>
             <td><code>SortDirection</code></td>
             <td>false</td>
-            <td><code>"ascending"</code></td>
+            <td><code>ascending</code></td>
             <td>Specifies the direction of the sort</td>
           </tr>
         </tbody>
@@ -7016,7 +6988,7 @@ will behave as though scrollable={true} in all cases</td>
       <tbody>
           <tr>
             <td>selectedTabColor</td>
-            <td><code>string</code></td>
+            <td><code>Color</code></td>
             <td>false</td>
             <td><code>-</code></td>
             <td>-</td>