@simplybusiness/mobius 4.0.0-beta.9 → 4.0.0

package/CHANGELOG.md

@@ -5,11 +5,43 @@ All notable changes to this project will be documented in this file, or link in
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## Unreleased
+## 4.0.0
+
+### Fixed
+
+- Fixed body content jumping when Modal/Drawer shown
 
 ### Added
 
 - `useBreakPoint` hook supports initialisation with custom breakpoints array.
+- `Drawer` atom provides a modal panel that enters screen from left, top, right or bottom.
+- To match refined design guidelines in Figma, SB theme colour palette has been updated with the following additions: `--color-azure-300`, `--color-azure-400`, `--color-azure-700`
+
+### Changed
+
+- Replace `<DatePicker>` with lighter alternative
+- Use `--font-family` instead of `--font-family-body` and `--font-family-heading` as it's one font now
+- Adjust font size variables to match Figma
+- Rename `--line-height-loose` to `--line-height-normal` to match naming of other variables; reduce line-height from 1.7 to 1.5 as per Figma
+- Increase `--line-height-tight` from 1.2 to 1.333 to match Figma
+- Rename `caption` variant to `small` to reflect Figma
+- Adjust default `<Link>` styles to match Figma
+- Replace size-0 through to size-100 with size-xs through to size-xxl variables as per new design guidelines from the UX
+- Change `<Icon>` size prop to only support Figma sizes - `xs`, `sm`, `md`, `lg`
+- Change `<Button>` size prop from `small`, `medium`, `large` to `sm`, `md`, `lg`
+- Modal and Drawer support nesting; only the topmost dialog is closed or cancelled.
+- Load react-day-picker only on non-touch devices as for mobile `<input type="date">` is used instead. This is to optimise component performance and reduce unnecessary kilobytes when using touch devices
+
+### Removed
+
+- To match refined design guidelines in Figma, SB theme colour palette has been updated with the following removed: `--color-neutral-400`, `--color-bubblegum-600`, `--color-bubblegum-700`
+- Remove `lead` variant from `<Text>` as it's no longer used
+- Remove unused Museo Sans Rounded font as it's no longer used
+- Remove unused Museo Sans weights 100, 300 and 900 as they're no longer used
+- Remove `--font-weight-light` in favour of `--font-weight-normal` as they're both of the same weight - 500
+- Remove `--line-height-single` in favour of `--line-height-normal` to match predefined line heights in Figma
+- Remove default font size changes on breakpoints for h1, h2, h3
+- Remove unused h5, h6 variants
 
 ## [4.0.0-beta.3] - 2023-11-09
 
@@ -400,6 +432,7 @@ Additionally, mobius and themes are available on the public NPM registry and can
 
 ## Github Links
 
+[4.0.0]: https://github.com/simplybusiness/mobius/releases/tag/v4.0.0
 [3.12.2]: https://github.com/simplybusiness/mobius/releases/tag/v3.12.2
 [3.12.1]: https://github.com/simplybusiness/mobius/releases/tag/v3.12.1
 [3.12.0]: https://github.com/simplybusiness/mobius/releases/tag/v3.12.0

package/dist/cjs/components/Button/Button.d.ts

@@ -4,7 +4,7 @@ import { ForwardedRefComponent } from "../../types/components";
 import { UseButtonProps } from "../../hooks/useButton";
 export type ButtonElementType = HTMLButtonElement;
 export type Variant = "primary" | "secondary" | "ghost" | "inverse" | "inverse-ghost" | "basic";
-export type Size = "small" | "medium" | "large";
+export type Size = "sm" | "md" | "lg";
 export interface ButtonProps extends UseButtonProps, DOMProps, RefAttributes<ButtonElementType> {
     /** Custom class name for setting specific CSS */
     className?: string;

package/dist/cjs/components/Button/Button.js

@@ -23,7 +23,7 @@ const Loading_1 = require("./Loading");
 const useButton_1 = require("../../hooks/useButton");
 let HAS_DEPRECATION_WARNING_SHOWN = false;
 const Button = (0, react_1.forwardRef)((props, ref) => {
-    const { children, elementType: Component = "button", isDisabled, isLoading, isSuccess, variant = "primary", size = "medium", icon, iconPosition, 
+    const { children, elementType: Component = "button", isDisabled, isLoading, isSuccess, variant = "primary", size = "md", icon, iconPosition, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onPress, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/dist/cjs/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,iCAAkE;AAClE,+DAA2C;AAG3C,uCAAoC;AACpC,qDAAkE;AAElE,IAAI,6BAA6B,GAAG,KAAK,CAAC;AAyC1C,MAAM,MAAM,GACV,IAAA,kBAAU,EAAC,CAAC,KAAkB,EAAE,GAAc,EAAE,EAAE;IAChD,MAAM,EACJ,QAAQ,EACR,WAAW,EAAE,SAAS,GAAG,QAAQ,EACjC,UAAU,EACV,SAAS,EACT,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,IAAI,EACJ,YAAY;IACZ,6DAA6D;IAC7D,OAAO;IACP,6DAA6D;IAC7D,OAAO,KAEL,KAAK,EADJ,UAAU,UACX,KAAK,EAfH,oIAeL,CAAQ,CAAC;IACV,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,qBAAS,EAAC,KAAK,CAAC,CAAC;IAEzC,IAAI,CAAC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,6BAA6B,EAAE;QAC5D,sCAAsC;QACtC,OAAO,CAAC,IAAI,CACV,uJAAuJ,CACxJ,CAAC;QACF,6BAA6B,GAAG,IAAI,CAAC;KACtC;IAED,gDAAgD;IAChD,MAAM,OAAO,GAAG,IAAA,gBAAU,EACxB,QAAQ,EACR,eAAe,EACf,aAAa,OAAO,EAAE,EACtB,UAAU,IAAI,EAAE,EAChB;QACE,eAAe,EAAE,UAAU;QAC3B,cAAc,EAAE,SAAS;QACzB,cAAc,EAAE,SAAS,IAAI,CAAC,SAAS;KACxC,EACD,UAAU,CAAC,SAAS,CACrB,CAAC;IACF,UAAU,CAAC,SAAS,GAAG,OAAO,CAAC;IAE/B,OAAO,CACL,uBAAC,SAAS,kBAAC,GAAG,EAAE,GAAG,IAAM,WAAW,EAAM,UAAU,cACjD,SAAS,CAAC,CAAC,CAAC,uBAAC,iBAAO,KAAG,CAAC,CAAC,CAAC,QAAQ,IAAI,QAAQ,IACrC,CACb,CAAC;AACJ,CAAC,CAAC,CAAC;AAGI,wBAAM;AADf,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,iCAAkE;AAClE,+DAA2C;AAG3C,uCAAoC;AACpC,qDAAkE;AAElE,IAAI,6BAA6B,GAAG,KAAK,CAAC;AAyC1C,MAAM,MAAM,GACV,IAAA,kBAAU,EAAC,CAAC,KAAkB,EAAE,GAAc,EAAE,EAAE;IAChD,MAAM,EACJ,QAAQ,EACR,WAAW,EAAE,SAAS,GAAG,QAAQ,EACjC,UAAU,EACV,SAAS,EACT,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,YAAY;IACZ,6DAA6D;IAC7D,OAAO;IACP,6DAA6D;IAC7D,OAAO,KAEL,KAAK,EADJ,UAAU,UACX,KAAK,EAfH,oIAeL,CAAQ,CAAC;IACV,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,qBAAS,EAAC,KAAK,CAAC,CAAC;IAEzC,IAAI,CAAC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,6BAA6B,EAAE;QAC5D,sCAAsC;QACtC,OAAO,CAAC,IAAI,CACV,uJAAuJ,CACxJ,CAAC;QACF,6BAA6B,GAAG,IAAI,CAAC;KACtC;IAED,gDAAgD;IAChD,MAAM,OAAO,GAAG,IAAA,gBAAU,EACxB,QAAQ,EACR,eAAe,EACf,aAAa,OAAO,EAAE,EACtB,UAAU,IAAI,EAAE,EAChB;QACE,eAAe,EAAE,UAAU;QAC3B,cAAc,EAAE,SAAS;QACzB,cAAc,EAAE,SAAS,IAAI,CAAC,SAAS;KACxC,EACD,UAAU,CAAC,SAAS,CACrB,CAAC;IACF,UAAU,CAAC,SAAS,GAAG,OAAO,CAAC;IAE/B,OAAO,CACL,uBAAC,SAAS,kBAAC,GAAG,EAAE,GAAG,IAAM,WAAW,EAAM,UAAU,cACjD,SAAS,CAAC,CAAC,CAAC,uBAAC,iBAAO,KAAG,CAAC,CAAC,CAAC,QAAQ,IAAI,QAAQ,IACrC,CACb,CAAC;AACJ,CAAC,CAAC,CAAC;AAGI,wBAAM;AADf,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/dist/cjs/components/Button/Button.stories.js

@@ -48,7 +48,7 @@ exports.Normal = {
     args: {
         children: "Confirm",
         variant: "primary",
-        size: "medium",
+        size: "md",
         isDisabled: false,
         isLoading: false,
         isSuccess: false,
@@ -59,7 +59,7 @@ exports.Secondary = {
     render: (args) => (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({}, args)),
     args: {
         variant: "secondary",
-        size: "medium",
+        size: "md",
         children: "Secondary Button",
         isDisabled: false,
         isLoading: false,
@@ -71,7 +71,7 @@ exports.Ghost = {
     render: (args) => (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({}, args)),
     args: {
         variant: "ghost",
-        size: "medium",
+        size: "md",
         children: "Ghost Button",
         isDisabled: false,
         isLoading: false,
@@ -83,7 +83,7 @@ exports.Basic = {
     render: (args) => (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({}, args)),
     args: {
         variant: "basic",
-        size: "medium",
+        size: "md",
         children: "Basic Button",
         isDisabled: false,
         isLoading: false,
@@ -96,7 +96,7 @@ exports.Large = {
     args: {
         children: "Large Button",
         variant: "primary",
-        size: "large",
+        size: "lg",
         isDisabled: false,
         isLoading: false,
         isSuccess: false,
@@ -109,7 +109,7 @@ exports.Link = {
         children: "Link Button",
         elementType: "a",
         variant: "primary",
-        size: "medium",
+        size: "md",
         isDisabled: false,
         isLoading: false,
         isSuccess: false,
@@ -123,7 +123,7 @@ exports.Loading = {
     args: {
         children: "Loading",
         variant: "primary",
-        size: "medium",
+        size: "md",
         isDisabled: false,
         isLoading: true,
         isSuccess: false,
@@ -135,7 +135,7 @@ exports.Success = {
     args: {
         children: "Success",
         variant: "primary",
-        size: "medium",
+        size: "md",
         isDisabled: false,
         isLoading: false,
         isSuccess: true,
@@ -147,7 +147,7 @@ exports.Disabled = {
     args: {
         children: "Disabled",
         variant: "primary",
-        size: "medium",
+        size: "md",
         isDisabled: true,
         isLoading: false,
         isSuccess: false,
@@ -163,7 +163,7 @@ exports.WithIconOnTheLeft = {
     args: {
         children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icons_1.leftArrow }), "Back"] })),
         variant: "secondary",
-        size: "medium",
+        size: "md",
         isDisabled: false,
         isLoading: false,
         isSuccess: false,
@@ -180,7 +180,7 @@ exports.WithIconOnTheRight = {
     args: {
         children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Menu ", (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icons_1.menu })] })),
         variant: "primary",
-        size: "medium",
+        size: "md",
         isDisabled: false,
         isLoading: false,
         isSuccess: false,
@@ -197,7 +197,7 @@ exports.Themed = {
     args: {
         children: "Confirm",
         variant: "primary",
-        size: "medium",
+        size: "md",
         isDisabled: false,
         isLoading: false,
         isSuccess: false,

package/dist/cjs/components/Button/Button.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":";;;;AAAA,iCAAiC;AAEjC,iDAAwD;AACxD,qCAA+C;AAC/C,kCAA+B;AAC/B,iEAA8D;AAE9D,kBAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,eAAM;IACjB,cAAc,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC;IAC1C,QAAQ,kBACN,SAAS,EAAE;YACT,EAAE,EAAE;gBACF,GAAG,EAAE,WAAW;gBAChB,MAAM,EAAE,KAAK;aACd;SACF,EACD,SAAS,EAAE;YACT,EAAE,EAAE;gBACF,GAAG,EAAE,WAAW;gBAChB,MAAM,EAAE,KAAK;aACd;SACF,EACD,IAAI,EAAE;YACJ,EAAE,EAAE;gBACF,GAAG,EAAE,aAAa;gBAClB,EAAE,EAAE,GAAG;aACR;SACF,EACD,GAAG,EAAE;YACH,EAAE,EAAE;gBACF,GAAG,EAAE,aAAa;gBAClB,EAAE,EAAE,GAAG;aACR;SACF,EACD,MAAM,EAAE;YACN,EAAE,EAAE;gBACF,GAAG,EAAE,aAAa;gBAClB,EAAE,EAAE,GAAG;aACR;SACF,EACD,IAAI,EAAE;YACJ,EAAE,EAAE;gBACF,GAAG,EAAE,aAAa;gBAClB,GAAG,EAAE,GAAG;aACT;SACF,IACE,IAAA,iCAAe,EAChB,WAAW,EACX,SAAS,EACT,aAAa,EACb,SAAS,EACT,MAAM,EACN,MAAM,EACN,cAAc,EACd,UAAU,CACX,CACF;CACF,CAAC;AAEW,QAAA,MAAM,GAAwB;IACzC,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE,CAAC,uBAAC,eAAM,oBAAK,IAAI,EAAI;IACnD,IAAI,EAAE;QACJ,QAAQ,EAAE,SAAS;QACnB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,QAAQ;QACd,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,KAAK;QAChB,IAAI,EAAE,QAAQ;KACf;CACF,CAAC;AAEW,QAAA,SAAS,GAAwB;IAC5C,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE,CAAC,uBAAC,eAAM,oBAAK,IAAI,EAAI;IACnD,IAAI,EAAE;QACJ,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,kBAAkB;QAC5B,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,KAAK;QAChB,IAAI,EAAE,QAAQ;KACf;CACF,CAAC;AAEW,QAAA,KAAK,GAAwB;IACxC,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE,CAAC,uBAAC,eAAM,oBAAK,IAAI,EAAI;IACnD,IAAI,EAAE;QACJ,OAAO,EAAE,OAAO;QAChB,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,cAAc;QACxB,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,KAAK;QAChB,IAAI,EAAE,QAAQ;KACf;CACF,CAAC;AAEW,QAAA,KAAK,GAAwB;IACxC,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE,CAAC,uBAAC,eAAM,oBAAK,IAAI,EAAI;IACnD,IAAI,EAAE;QACJ,OAAO,EAAE,OAAO;QAChB,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,cAAc;QACxB,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,KAAK;QAChB,IAAI,EAAE,QAAQ;KACf;CACF,CAAC;AAEW,QAAA,KAAK,GAAwB;IACxC,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE,CAAC,uBAAC,eAAM,oBAAK,IAAI,EAAI;IACnD,IAAI,EAAE;QACJ,QAAQ,EAAE,cAAc;QACxB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,OAAO;QACb,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,KAAK;QAChB,IAAI,EAAE,QAAQ;KACf;CACF,CAAC;AAEW,QAAA,IAAI,GAAwB;IACvC,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE,CAAC,uBAAC,eAAM,oBAAK,IAAI,EAAI;IACnD,IAAI,EAAE;QACJ,QAAQ,EAAE,aAAa;QACvB,WAAW,EAAE,GAAG;QAChB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,QAAQ;QACd,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,KAAK;QAChB,IAAI,EAAE,EAAE;QACR,GAAG,EAAE,EAAE;QACP,MAAM,EAAE,EAAE;KACX;CACF,CAAC;AAEW,QAAA,OAAO,GAAwB;IAC1C,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE,CAAC,uBAAC,eAAM,oBAAK,IAAI,EAAI;IACnD,IAAI,EAAE;QACJ,QAAQ,EAAE,SAAS;QACnB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,QAAQ;QACd,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,IAAI;QACf,SAAS,EAAE,KAAK;QAChB,IAAI,EAAE,QAAQ;KACf;CACF,CAAC;AAEW,QAAA,OAAO,GAAwB;IAC1C,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE,CAAC,uBAAC,eAAM,oBAAK,IAAI,EAAI;IACnD,IAAI,EAAE;QACJ,QAAQ,EAAE,SAAS;QACnB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,QAAQ;QACd,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,IAAI;QACf,IAAI,EAAE,QAAQ;KACf;CACF,CAAC;AAEW,QAAA,QAAQ,GAAwB;IAC3C,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE,CAAC,uBAAC,eAAM,oBAAK,IAAI,EAAI;IACnD,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,QAAQ;QACd,UAAU,EAAE,IAAI;QAChB,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,KAAK;QAChB,IAAI,EAAE,QAAQ;KACf;CACF,CAAC;AAEW,QAAA,iBAAiB,GAAwB;IACpD,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE;QAC5B,0CAA0C;QAC1C,OAAO,CAAC,2BAA2B,CAAC,CAAC;QACrC,OAAO,uBAAC,eAAM,oBAAK,IAAI,EAAI,CAAC;IAC9B,CAAC;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,CACR,6DACE,uBAAC,WAAI,IAAC,IAAI,EAAE,iBAAS,GAAI,YAExB,CACJ;QACD,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,QAAQ;QACd,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,0BAA0B;QACrC,IAAI,EAAE,QAAQ;KACf;CACF,CAAC;AAEW,QAAA,kBAAkB,GAAwB;IACrD,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE;QAC5B,0CAA0C;QAC1C,OAAO,CAAC,2BAA2B,CAAC,CAAC;QACrC,OAAO,uBAAC,eAAM,oBAAK,IAAI,EAAI,CAAC;IAC9B,CAAC;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,CACR,sEACO,uBAAC,WAAI,IAAC,IAAI,EAAE,YAAI,GAAI,IACxB,CACJ;QACD,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,QAAQ;QACd,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,0BAA0B;QACrC,IAAI,EAAE,QAAQ;KACf;CACF,CAAC;AAEW,QAAA,MAAM,GAAwB;IACzC,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE;QAC5B,0CAA0C;QAC1C,OAAO,CAAC,2BAA2B,CAAC,CAAC;QACrC,OAAO,uBAAC,eAAM,oBAAK,IAAI,EAAI,CAAC;IAC9B,CAAC;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,SAAS;QACnB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,QAAQ;QACd,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,2BAA2B;QACtC,IAAI,EAAE,QAAQ;KACf;CACF,CAAC;AAEK,MAAM,OAAO,GAAG,GAAG,EAAE;IAC1B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IACtC,OAAO,CACL,wBAAC,eAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,yBAAW,KAAK,cAAgB,CAC5E,CAAC;AACJ,CAAC,CAAC;AALW,QAAA,OAAO,WAKlB;AAEK,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAgB,EAAE,CAAC,CAAC;IAC9D,MAAM,GAAG,GAAG,CAAC,CAAS,EAAE,EAAE;QACxB,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC,CAAC;IACF,OAAO,CACL,4CACE,uBAAC,eAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,yBAAmB,EACxD,yCACG,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC9B,oDAAoD;gBACpD,yCAAa,QAAQ,IAAZ,CAAC,CAAiB,CAC5B,CAAC,GACC,IACD,CACP,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,WAAW,eAgBtB"}
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Drawer/Content.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode, Ref, RefAttributes } from "react";
+import { DOMProps } from "../../types/dom";
+export type DivRef = Ref<HTMLDivElement>;
+export type DivElementType = HTMLDivElement;
+export interface ContentProps extends DOMProps, RefAttributes<DivElementType> {
+    children?: ReactNode;
+    onClose?: () => void;
+    closeLabel?: string;
+}
+declare const Content: import("react").ForwardRefExoticComponent<Omit<ContentProps, "ref"> & RefAttributes<HTMLDivElement>>;
+export { Content };

package/dist/cjs/components/Drawer/Content.js

@@ -0,0 +1,41 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Content = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dedupe_1 = __importDefault(require("classnames/dedupe"));
+const react_1 = require("react");
+const Content = (0, react_1.forwardRef)((
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+_a, ref) => {
+    var 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    { children, onClose, closeLabel } = _a, otherProps = __rest(_a, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ["children", "onClose", "closeLabel"]);
+    const classes = (0, dedupe_1.default)("mobius/DrawerContent");
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref }, otherProps, { className: classes, children: react_1.Children.map(children, child => {
+            if ((0, react_1.isValidElement)(child)) {
+                return (0, react_1.cloneElement)(child, {
+                    onClose,
+                });
+            }
+            return child;
+        }) })));
+});
+exports.Content = Content;
+Content.displayName = "Content";
+//# sourceMappingURL=Content.js.map

package/dist/cjs/components/Drawer/Content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.js","sourceRoot":"","sources":["../../../../src/components/Drawer/Content.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,+DAA2C;AAC3C,iCAQe;AAWf,MAAM,OAAO,GAAG,IAAA,kBAAU,EACxB;AACE,6DAA6D;AAC7D,EAA8D,EAC9D,GAAW,EACX,EAAE;;IAHF,6DAA6D;IAC7D,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,OAA+B,EAA1B,UAAU;IAD9C,6DAA6D;IAC7D,qCAAgD,CAAF;IAG9C,MAAM,OAAO,GAAG,IAAA,gBAAU,EAAC,sBAAsB,CAAC,CAAC;IAEnD,OAAO,CACL,8CAAK,GAAG,EAAE,GAAG,IAAM,UAAU,IAAE,SAAS,EAAE,OAAO,YAC9C,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE;YAC9B,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;gBACzB,OAAO,IAAA,oBAAY,EAAC,KAAK,EAAE;oBACzB,OAAO;iBACD,CAAC,CAAC;aACX;YAED,OAAO,KAAK,CAAC;QACf,CAAC,CAAC,IACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAGO,0BAAO;AADhB,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/dist/cjs/components/Drawer/Drawer.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+export interface DrawerProps {
+    isOpen: boolean;
+    /**
+     * Direction that drawer will open from
+     */
+    direction: "top" | "bottom" | "left" | "right";
+    className?: string;
+    closeLabel?: string;
+    /**
+     * Announce text for screen readers when drawer opens
+     */
+    announce?: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+    children?: ReactNode;
+}
+declare const Drawer: {
+    ({ isOpen, className, closeLabel, direction, announce, onOpen, onClose, children, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Drawer };

package/dist/cjs/components/Drawer/Drawer.js

@@ -0,0 +1,98 @@
+"use strict";
+/* eslint-disable no-console */
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drawer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// eslint-disable-next-line import/no-extraneous-dependencies
+const dedupe_1 = __importDefault(require("classnames/dedupe"));
+const react_1 = require("react");
+const useBodyScrollLock_1 = require("../../hooks/useBodyScrollLock");
+const polyfill_tests_1 = require("../../utils/polyfill-tests");
+const VisuallyHidden_1 = require("../VisuallyHidden");
+const Drawer = ({ isOpen, className, closeLabel, direction, announce = "Drawer opened on screen", onOpen, onClose, children, }) => {
+    const hasOpened = (0, react_1.useRef)(false);
+    const modalRef = (0, react_1.useRef)(null);
+    const dialog = modalRef.current;
+    // Fire onOpen once
+    if (onOpen && !hasOpened.current) {
+        onOpen();
+        hasOpened.current = true;
+    }
+    (0, useBodyScrollLock_1.useBodyScrollLock)({ enabled: isOpen });
+    // Add close handler, to enable closing animations
+    const handleClose = (0, react_1.useCallback)(event => {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            const doClose = () => {
+                dialog.close();
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            };
+            // Delay close to allow exit animation
+            dialog.classList.add("close");
+            dialog.addEventListener("animationend", () => {
+                dialog.classList.remove("close");
+                doClose();
+            }, { once: true });
+        }
+    }, [onClose, dialog]);
+    const modalClasses = (0, dedupe_1.default)("mobius", "mobius/Drawer", `--${direction}`, className);
+    // Add polyfill for HTML Dialog in old browsers
+    (0, react_1.useEffect)(() => {
+        async function toggleModal() {
+            var _a, _b, _c;
+            if (!(0, polyfill_tests_1.supportsDialog)() && typeof window !== "undefined") {
+                // eslint-disable-next-line import/no-extraneous-dependencies
+                const { default: dialogPolyfill } = await Promise.resolve().then(() => __importStar(require("dialog-polyfill")));
+                dialogPolyfill.registerDialog(modalRef.current);
+            }
+            if (isOpen) {
+                (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.showModal();
+                onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+            }
+            else if ((_b = modalRef.current) === null || _b === void 0 ? void 0 : _b.open) {
+                (_c = modalRef.current) === null || _c === void 0 ? void 0 : _c.close();
+            }
+        }
+        toggleModal();
+    }, [isOpen, onOpen]);
+    return ((0, jsx_runtime_1.jsxs)("dialog", { ref: modalRef, onCancel: handleClose, className: modalClasses, "aria-describedby": "screen-reader-announce", children: [(0, jsx_runtime_1.jsx)(VisuallyHidden_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("div", { id: "screen-reader-announce", children: announce }) }), react_1.Children.map(children, child => {
+                if ((0, react_1.isValidElement)(child)) {
+                    return (0, react_1.cloneElement)(child, {
+                        onClose: handleClose,
+                        closeLabel,
+                    });
+                }
+                return child;
+            })] }));
+};
+exports.Drawer = Drawer;
+Drawer.displayName = "Drawer";
+//# sourceMappingURL=Drawer.js.map

package/dist/cjs/components/Drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":";AAAA,+BAA+B;AAE/B,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,6DAA6D;AAC7D,+DAA2C;AAC3C,iCASe;AACf,qEAAkE;AAClE,+DAA4D;AAC5D,sDAAmD;AAmBnD,MAAM,MAAM,GAAG,CAAC,EACd,MAAM,EACN,SAAS,EACT,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,yBAAyB,EACpC,MAAM,EACN,OAAO,EACP,QAAQ,GACI,EAAE,EAAE;IAChB,MAAM,SAAS,GAAG,IAAA,cAAM,EAAU,KAAK,CAAC,CAAC;IACzC,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IACjD,MAAM,MAAM,GAAG,QAAQ,CAAC,OAA4B,CAAC;IAErD,mBAAmB;IACnB,IAAI,MAAM,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;QAChC,MAAM,EAAE,CAAC;QACT,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;KAC1B;IAED,IAAA,qCAAiB,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC;IAEvC,kDAAkD;IAClD,MAAM,WAAW,GAAyC,IAAA,mBAAW,EACnE,KAAK,CAAC,EAAE;QACN,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YAExB,MAAM,OAAO,GAAG,GAAG,EAAE;gBACnB,MAAM,CAAC,KAAK,EAAE,CAAC;gBACf,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;YACd,CAAC,CAAC;YAEF,sCAAsC;YACtC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YAC9B,MAAM,CAAC,gBAAgB,CACrB,cAAc,EACd,GAAG,EAAE;gBACH,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;gBACjC,OAAO,EAAE,CAAC;YACZ,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;SACH;IACH,CAAC,EACD,CAAC,OAAO,EAAE,MAAM,CAAC,CAClB,CAAC;IAEF,MAAM,YAAY,GAAG,IAAA,gBAAU,EAC7B,QAAQ,EACR,eAAe,EACf,KAAK,SAAS,EAAE,EAChB,SAAS,CACV,CAAC;IAEF,+CAA+C;IAC/C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,KAAK,UAAU,WAAW;;YACxB,IAAI,CAAC,IAAA,+BAAc,GAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;gBACtD,6DAA6D;gBAC7D,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,wDAAa,iBAAiB,GAAC,CAAC;gBACpE,cAAc,CAAC,cAAc,CAAC,QAAQ,CAAC,OAA4B,CAAC,CAAC;aACtE;YAED,IAAI,MAAM,EAAE;gBACV,MAAA,QAAQ,CAAC,OAAO,0CAAE,SAAS,EAAE,CAAC;gBAC9B,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,CAAC;aACZ;iBAAM,IAAI,MAAA,QAAQ,CAAC,OAAO,0CAAE,IAAI,EAAE;gBACjC,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC3B;QACH,CAAC;QAED,WAAW,EAAE,CAAC;IAChB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,oCACE,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,WAAW,EACrB,SAAS,EAAE,YAAY,sBACN,wBAAwB,aAEzC,uBAAC,+BAAc,cACb,gCAAK,EAAE,EAAC,wBAAwB,YAAE,QAAQ,GAAO,GAClC,EAChB,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE;gBAC9B,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;oBACzB,OAAO,IAAA,oBAAY,EAAC,KAAK,EAAE;wBACzB,OAAO,EAAE,WAAW;wBACpB,UAAU;qBACJ,CAAC,CAAC;iBACX;gBAED,OAAO,KAAK,CAAC;YACf,CAAC,CAAC,IACK,CACV,CAAC;AACJ,CAAC,CAAC;AAGO,wBAAM;AADf,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/dist/cjs/components/Drawer/Drawer.stories.d.ts

@@ -0,0 +1,27 @@
+import type { Meta } from "@storybook/react";
+import { DrawerProps } from ".";
+declare const Demo: ({ direction, closeLabel }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+declare const LogoHeader: ({ direction, closeLabel }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+declare const WithLongContentDemo: (props: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: {
+    title: string;
+    component: {
+        ({ isOpen, className, closeLabel, direction, announce, onOpen, onClose, children, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    } & {
+        Header: import("react").ForwardRefExoticComponent<Omit<import("./Header").HeaderProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+        Content: import("react").ForwardRefExoticComponent<Omit<import("./Content").ContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    };
+    argTypes: {
+        direction: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Normal: Meta<typeof Demo>;
+export declare const WithLogoHeader: Meta<typeof LogoHeader>;
+export declare const WithLongContent: Meta<typeof WithLongContentDemo>;

package/dist/cjs/components/Drawer/Drawer.stories.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithLongContent = exports.WithLogoHeader = exports.Normal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require(".");
+const excludeControls_1 = require("../../utils/excludeControls");
+const Button_1 = require("../Button");
+const Text_1 = require("../Text");
+const Demo = ({ direction, closeLabel }) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setOpen(true), children: "Show Drawer" }), (0, jsx_runtime_1.jsxs)(_1.Drawer, { isOpen: open, onClose: () => setOpen(false), direction: direction, closeLabel: closeLabel, children: [(0, jsx_runtime_1.jsx)(_1.Drawer.Header, { children: "The Latin Drawer" }), (0, jsx_runtime_1.jsx)(_1.Drawer.Content, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." })] })] }));
+};
+const LogoHeader = ({ direction, closeLabel }) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setOpen(true), children: "Show Drawer" }), (0, jsx_runtime_1.jsxs)(_1.Drawer, { isOpen: open, onClose: () => setOpen(false), direction: direction, closeLabel: closeLabel, children: [(0, jsx_runtime_1.jsx)(_1.Drawer.Header, { children: (0, jsx_runtime_1.jsx)("img", { src: "https://quote.simplybusiness.com/assets/logos/insurers/harborway_insurance-1a46ba508f3dfcc89aa2498e7680ed15bd1704ccb01c614eb5335bd7b25e0537.png", alt: "Provider logo" }) }), (0, jsx_runtime_1.jsx)(_1.Drawer.Content, { children: "Content." })] })] }));
+};
+const WithLongContentDemo = (props) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setOpen(true), children: "Show Drawer" }), (0, jsx_runtime_1.jsxs)(_1.Drawer, Object.assign({}, props, { isOpen: open, onClose: () => setOpen(false), children: [(0, jsx_runtime_1.jsx)(_1.Drawer.Header, { children: "Aliquam fringilla quam vel purus rhoncus isuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Int" }), (0, jsx_runtime_1.jsxs)(_1.Drawer.Content, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." })] })] }))] }));
+};
+exports.default = {
+    title: "Components/Drawer",
+    component: _1.Drawer,
+    argTypes: Object.assign({ direction: {
+            options: ["top", "bottom", "left", "right"],
+            control: { type: "radio" },
+        } }, (0, excludeControls_1.excludeControls)("className", "onOpen", "onClose", "isOpen")),
+};
+exports.Normal = {
+    render: (args) => (0, jsx_runtime_1.jsx)(Demo, Object.assign({}, args)),
+    args: {
+        isOpen: false,
+        direction: "right",
+        closeLabel: "Close",
+    },
+};
+exports.WithLogoHeader = {
+    render: (args) => (0, jsx_runtime_1.jsx)(LogoHeader, Object.assign({}, args)),
+    args: {
+        isOpen: false,
+        direction: "right",
+        closeLabel: "Close",
+    },
+};
+exports.WithLongContent = {
+    render: (args) => (0, jsx_runtime_1.jsx)(WithLongContentDemo, Object.assign({}, args)),
+    args: {
+        isOpen: false,
+        direction: "right",
+    },
+};
+//# sourceMappingURL=Drawer.stories.js.map

package/dist/cjs/components/Drawer/Drawer.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.stories.js","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.stories.tsx"],"names":[],"mappings":";;;;AACA,iCAAiC;AACjC,wBAAwC;AACxC,iEAA8D;AAC9D,sCAAmC;AACnC,kCAA+B;AAE/B,MAAM,IAAI,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAAe,EAAE,EAAE;IACtD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACL,6DACE,uBAAC,eAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,4BAAsB,EAC1D,wBAAC,SAAM,IACL,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,aAEtB,uBAAC,SAAM,CAAC,MAAM,mCAAiC,EAC/C,uBAAC,SAAM,CAAC,OAAO,qaAOE,IACV,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAAe,EAAE,EAAE;IAC5D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACL,6DACE,uBAAC,eAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,4BAAsB,EAC1D,wBAAC,SAAM,IACL,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,aAEtB,uBAAC,SAAM,CAAC,MAAM,cACZ,gCACE,GAAG,EAAC,iJAAiJ,EACrJ,GAAG,EAAC,eAAe,GACnB,GACY,EAChB,uBAAC,SAAM,CAAC,OAAO,2BAA0B,IAClC,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,KAAkB,EAAE,EAAE;IACjD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACL,6DACE,uBAAC,eAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,4BAAsB,EAC1D,wBAAC,SAAM,oBAAK,KAAK,IAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,aAC5D,uBAAC,SAAM,CAAC,MAAM,6IAGE,EAChB,wBAAC,SAAM,CAAC,OAAO,eACb,uBAAC,WAAI,qaAQE,EACP,uBAAC,WAAI,qaAQE,EACP,uBAAC,WAAI,qaAQE,EACP,uBAAC,WAAI,qaAQE,EACP,uBAAC,WAAI,qaAQE,EACP,uBAAC,WAAI,qaAQE,EACP,uBAAC,WAAI,qaAQE,IACQ,KACV,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,SAAM;IACjB,QAAQ,kBACN,SAAS,EAAE;YACT,OAAO,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC;YAC3C,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B,IACE,IAAA,iCAAe,EAAC,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC,CAC/D;CACF,CAAC;AAEW,QAAA,MAAM,GAAsB;IACvC,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE,CAAC,uBAAC,IAAI,oBAAK,IAAI,EAAI;IACjD,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,OAAO;QAClB,UAAU,EAAE,OAAO;KACpB;CACF,CAAC;AAEW,QAAA,cAAc,GAA4B;IACrD,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE,CAAC,uBAAC,UAAU,oBAAK,IAAI,EAAI;IACvD,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,OAAO;QAClB,UAAU,EAAE,OAAO;KACpB;CACF,CAAC;AAEW,QAAA,eAAe,GAAqC;IAC/D,MAAM,EAAE,CAAC,IAAiB,EAAE,EAAE,CAAC,uBAAC,mBAAmB,oBAAK,IAAI,EAAI;IAChE,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,OAAO;KACnB;CACF,CAAC"}

package/dist/cjs/components/Drawer/Drawer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/Drawer/Drawer.test.js

@@ -0,0 +1,123 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const react_2 = require("react");
+const _1 = require(".");
+const jestHTMLDialogPolyfill_1 = require("../../utils/jestHTMLDialogPolyfill");
+(0, jestHTMLDialogPolyfill_1.jestHTMLDialogPolyfill)();
+const DRAWER_CLASS_NAME = "mobius/Drawer";
+const DRAWER_CLOSE_CLASS_NAME = "mobius/DrawerClose";
+const mockMatchMedia = (matches) => {
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        configurable: true,
+        value: jest.fn().mockImplementation(query => ({
+            matches,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(),
+            removeListener: jest.fn(),
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+        })),
+    });
+};
+describe("Drawer", () => {
+    beforeEach(() => {
+        mockMatchMedia(true);
+    });
+    afterAll(() => {
+        jest.resetAllMocks();
+    });
+    it("should render without errors", () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, direction: "right", onClose: () => { } }));
+        expect(container).toBeTruthy();
+    });
+    it("should render with default class names", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, direction: "right", onClose: () => { }, children: (0, jsx_runtime_1.jsx)(_1.Drawer.Header, {}) }));
+        const dialog = react_1.screen.getByRole("dialog");
+        const closeButton = react_1.screen.getByLabelText("Close");
+        expect(dialog).toHaveClass(DRAWER_CLASS_NAME);
+        expect(closeButton).toHaveClass(DRAWER_CLOSE_CLASS_NAME);
+    });
+    it("should render with custom class name", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { direction: "right", className: "my-test-modal", isOpen: true, onClose: () => { }, children: (0, jsx_runtime_1.jsx)(_1.Drawer.Header, {}) }));
+        const dialog = react_1.screen.getByRole("dialog");
+        const closeButton = react_1.screen.getByLabelText("Close");
+        expect(dialog).toHaveClass(DRAWER_CLASS_NAME);
+        expect(dialog).toHaveClass("my-test-modal");
+        expect(closeButton).toHaveClass(DRAWER_CLOSE_CLASS_NAME);
+    });
+    describe("given the direction prop is set", () => {
+        it("should render with appropriate class name (right)", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, onClose: () => { }, direction: "right" }));
+            const dialog = react_1.screen.getByRole("dialog");
+            expect(dialog).toHaveClass("--right");
+        });
+        it("should render with appropriate class name (bottom)", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, onClose: () => { }, direction: "bottom" }));
+            const dialog = react_1.screen.getByRole("dialog");
+            expect(dialog).toHaveClass("--bottom");
+        });
+    });
+    describe("screen reader", () => {
+        it("should announce a default message on opening", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, onClose: () => { }, direction: "right" }));
+            const message = react_1.screen.getByText("Drawer opened on screen");
+            expect(message).toBeInTheDocument();
+        });
+        it("should respect a custom announce message on opening", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, onClose: () => { }, direction: "right", announce: "Quote details page" }));
+            const message = react_1.screen.getByText("Quote details page");
+            expect(message).toBeInTheDocument();
+        });
+    });
+    xdescribe("pressing close button", () => {
+        it("should close the modal", async () => {
+            const App = () => {
+                const [isOpen, setIsOpen] = (0, react_2.useState)(true);
+                return ((0, jsx_runtime_1.jsxs)(_1.Drawer, { direction: "right", isOpen: isOpen, onClose: () => setIsOpen(false), children: [(0, jsx_runtime_1.jsx)(_1.Drawer.Header, { children: "Header" }), (0, jsx_runtime_1.jsx)(_1.Drawer.Content, { children: "Sample content" })] }));
+            };
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(App, {}));
+            const modalContent = react_1.screen.getByText("Sample content");
+            expect(modalContent).toBeInTheDocument();
+            const closeButton = react_1.screen.getByLabelText("Close");
+            await user_event_1.default.click(closeButton);
+        });
+    });
+    describe("closeLabel prop", () => {
+        it("should render the label", () => {
+            const closeLabel = "Leave";
+            (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.Drawer, { direction: "right", isOpen: true, onClose: () => { }, closeLabel: closeLabel, children: [(0, jsx_runtime_1.jsx)(_1.Drawer.Header, {}), "Sample content"] }));
+            const closeButton = react_1.screen.getByText(closeLabel);
+            expect(closeButton).toBeInTheDocument();
+        });
+    });
+    it("should render the default close button", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Drawer, { isOpen: true, direction: "right", onClose: () => { }, children: (0, jsx_runtime_1.jsx)(_1.Drawer.Header, {}) }));
+        const closeButton = react_1.screen.getByLabelText("Close");
+        expect(closeButton).toBeInTheDocument();
+    });
+    it("should fire onOpen callback if supplied", async () => {
+        const onOpen = jest.fn();
+        const App = () => {
+            const [isOpen, setIsOpen] = (0, react_2.useState)(false);
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { "aria-label": "Show modal", id: "btn", type: "button", onClick: () => setIsOpen(true), children: "Show modal" }), (0, jsx_runtime_1.jsxs)(_1.Drawer, { isOpen: isOpen, onClose: () => setIsOpen(false), direction: "right", onOpen: onOpen, children: [(0, jsx_runtime_1.jsx)(_1.Drawer.Header, { children: "Header" }), "Sample content"] })] }));
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(App, {}));
+        const showBtn = react_1.screen.getByText("Show modal");
+        expect(showBtn).toBeInTheDocument();
+        await user_event_1.default.click(showBtn);
+        expect(onOpen).toHaveBeenCalled();
+    });
+    it.todo("Drawer closes when Escape key is presed");
+    // JSDom does not support HTMLDialog click events
+    it.todo("Drawer closes when backdrop is clicked");
+});
+//# sourceMappingURL=Drawer.test.js.map