@mrshmllw/smores-react 16.9.0 → 16.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/ButtonContainer/ButtonContainer.d.ts +7 -0
  2. package/dist/ButtonContainer/ButtonContainer.js +19 -7
  3. package/dist/ButtonContainer/ButtonContainer.js.map +1 -1
  4. package/dist/ButtonContainer/index.d.ts +1 -1
  5. package/dist/ButtonContainer/index.js.map +1 -1
  6. package/package.json +3 -3
package/dist/ButtonContainer/ButtonContainer.d.ts CHANGED
@@ -4,6 +4,7 @@ type ButtonElement = ReactElement<{
4
4
  'aria-describedby'?: string;
5
5
  }>;
6
6
  export type ButtonContainerOrientation = 'vertical' | 'horizontal';
7
+ export type ButtonContainerAlignment = 'center' | 'start' | 'end';
7
8
  export type ButtonContainerSupportingMessage = {
8
9
  /** Short plain text, e.g. reassurance copy. Required, so an icon never shows on its own */
9
10
  text: string;
@@ -20,6 +21,12 @@ export type ButtonContainerProps = {
20
21
  tertiaryButton?: ButtonElement;
21
22
  /** Stack the buttons vertically or lay them out side by side */
22
23
  orientation?: ButtonContainerOrientation;
24
+ /**
25
+ * Where the buttons and supporting text sit from 768px up. Use `start` or
26
+ * `end` to line them up with the edge of the page content. On mobile they
27
+ * fill the width.
28
+ */
29
+ align?: ButtonContainerAlignment;
23
30
  /** Optional message shown below the buttons, e.g. reassurance copy */
24
31
  supportingMessage?: ButtonContainerSupportingMessage;
25
32
  /**
package/dist/ButtonContainer/ButtonContainer.js CHANGED
@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
2
2
  import { Fragment, cloneElement, useEffect, useId, useRef, useState, } from 'react';
3
3
  import styled, { css, useTheme } from 'styled-components';
4
4
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5
- export const ButtonContainer = ({ className, primaryButton, secondaryButton, tertiaryButton, orientation = 'vertical', supportingMessage, pinned = true, }) => {
5
+ export const ButtonContainer = ({ className, primaryButton, secondaryButton, tertiaryButton, orientation = 'vertical', align = 'center', supportingMessage, pinned = true, }) => {
6
6
  const theme = useTheme();
7
7
  const supportingTextId = useId();
8
8
  const containerRef = useRef(null);
@@ -33,9 +33,14 @@ export const ButtonContainer = ({ className, primaryButton, secondaryButton, ter
33
33
  const buttons = orientation === 'horizontal'
34
34
  ? [tertiaryButton, secondaryButton, describedPrimaryButton]
35
35
  : [describedPrimaryButton, secondaryButton, tertiaryButton];
36
- return (_jsxs(_Fragment, { children: [pinned && _jsx(Spacer, { "aria-hidden": "true", $height: containerHeight }), _jsxs(Container, { ref: containerRef, className: className, $pinned: pinned, children: [_jsx(ButtonGroup, { $orientation: orientation, children: buttons.map((button, index) => button && _jsx(Fragment, { children: button }, index)) }), supportingMessage && hasSupportingMessage && (_jsxs(SupportingText, { id: supportingTextId, children: [supportingMessage.icon && (_jsx(SupportingIconContainer, { children: _jsx(FontAwesomeIcon, { icon: supportingMessage.icon, color: theme.color.icon.subtle }) })), supportingMessage.text] }))] })] }));
36
+ return (_jsxs(_Fragment, { children: [pinned && _jsx(Spacer, { "aria-hidden": "true", $height: containerHeight }), _jsxs(Container, { ref: containerRef, className: className, $pinned: pinned, children: [_jsx(ButtonGroup, { $orientation: orientation, $align: align, children: buttons.map((button, index) => button && _jsx(Fragment, { children: button }, index)) }), supportingMessage && hasSupportingMessage && (_jsxs(SupportingText, { id: supportingTextId, $align: align, children: [supportingMessage.icon && (_jsx(SupportingIconContainer, { children: _jsx(FontAwesomeIcon, { icon: supportingMessage.icon, color: theme.color.icon.subtle }) })), supportingMessage.text] }))] })] }));
37
37
  };
38
38
  const desktopMediaQuery = '@media (min-width: 768px)';
39
+ const horizontalMargins = {
40
+ center: '0 auto',
41
+ start: '0 auto 0 0',
42
+ end: '0 0 0 auto',
43
+ };
39
44
  const desktopVerticalButtonMaxWidth = '400px';
40
45
  const desktopHorizontalButtonMinWidth = '160px';
41
46
  const Spacer = styled.div(({ $height }) => css `
@@ -77,7 +82,7 @@ const Container = styled.div(({ theme, $pinned }) => css `
77
82
  `}
78
83
  `);
79
84
  // On desktop, horizontal buttons all match the width of the longest label
80
- const ButtonGroup = styled.div(({ theme, $orientation }) => css `
85
+ const ButtonGroup = styled.div(({ theme, $orientation, $align }) => css `
81
86
  display: grid;
82
87
  gap: ${theme.space[150]};
83
88
 
@@ -85,7 +90,7 @@ const ButtonGroup = styled.div(({ theme, $orientation }) => css `
85
90
  css `
86
91
  ${desktopMediaQuery} {
87
92
  grid-template-columns: minmax(0, ${desktopVerticalButtonMaxWidth});
88
- justify-content: center;
93
+ justify-content: ${$align};
89
94
  }
90
95
  `}
91
96
 
@@ -94,12 +99,12 @@ const ButtonGroup = styled.div(({ theme, $orientation }) => css `
94
99
  grid-auto-flow: column;
95
100
  grid-auto-columns: minmax(0, 1fr);
96
101
 
97
- // On desktop the buttons share the width of the longest label, centred
102
+ // On desktop the buttons share the width of the longest label
98
103
  ${desktopMediaQuery} {
99
104
  grid-auto-columns: minmax(${desktopHorizontalButtonMinWidth}, 1fr);
100
105
  width: fit-content;
101
106
  max-width: 100%;
102
- margin: 0 auto;
107
+ margin: ${horizontalMargins[$align]};
103
108
  }
104
109
  `}
105
110
  `);
@@ -120,12 +125,19 @@ const SupportingIconContainer = styled.span(({ theme }) => css `
120
125
  overflow: visible;
121
126
  }
122
127
  `);
123
- const SupportingText = styled.p(({ theme }) => css `
128
+ const SupportingText = styled.p(({ theme, $align }) => css `
124
129
  margin: 0;
125
130
  font-size: ${theme.font.body[200].fontSize};
126
131
  font-weight: ${theme.font.body[200].fontWeight};
127
132
  line-height: ${theme.font.body[200].lineHeight};
128
133
  color: ${theme.color.text.subtle};
129
134
  text-align: center;
135
+
136
+ ${$align !== 'center' &&
137
+ css `
138
+ ${desktopMediaQuery} {
139
+ text-align: ${$align};
140
+ }
141
+ `}
130
142
  `);
131
143
  //# sourceMappingURL=ButtonContainer.js.map
package/dist/ButtonContainer/ButtonContainer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonContainer.js","sourceRoot":"","sources":["../../src/ButtonContainer/ButtonContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n Fragment,\n ReactElement,\n cloneElement,\n useEffect,\n useId,\n useRef,\n useState,\n} from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\n\ntype ButtonElement = ReactElement<{ 'aria-describedby'?: string }>\n\nexport type ButtonContainerOrientation = 'vertical' | 'horizontal'\n\nexport type ButtonContainerSupportingMessage = {\n /** Short plain text, e.g. reassurance copy. Required, so an icon never shows on its own */\n text: string\n /** Optional decorative icon shown before the text */\n icon?: IconDefinition\n}\n\nexport type ButtonContainerProps = {\n className?: string\n /** Main action. Shown first when vertical, last (right) when horizontal */\n primaryButton: ButtonElement\n /** Optional supporting action */\n secondaryButton?: ButtonElement\n /** Optional low-emphasis action. Shown last when vertical, first (left) when horizontal */\n tertiaryButton?: ButtonElement\n /** Stack the buttons vertically or lay them out side by side */\n orientation?: ButtonContainerOrientation\n /** Optional message shown below the buttons, e.g. reassurance copy */\n supportingMessage?: ButtonContainerSupportingMessage\n /**\n * Pin the container to the bottom of the viewport on mobile.\n * On larger screens it always sits in the page flow.\n */\n pinned?: boolean\n}\n\nexport const ButtonContainer: FC<ButtonContainerProps> = ({\n className,\n primaryButton,\n secondaryButton,\n tertiaryButton,\n orientation = 'vertical',\n supportingMessage,\n pinned = true,\n}) => {\n const theme = useTheme()\n const supportingTextId = useId()\n const containerRef = useRef<HTMLDivElement>(null)\n const [containerHeight, setContainerHeight] = useState(0)\n\n // Reserve the pinned container's height in the page flow so it never covers content\n useEffect(() => {\n const element = containerRef.current\n if (!pinned || !element || typeof ResizeObserver === 'undefined') return\n\n const observer = new ResizeObserver(() => {\n setContainerHeight(element.getBoundingClientRect().height)\n })\n observer.observe(element)\n\n return () => observer.disconnect()\n }, [pinned])\n\n const hasSupportingMessage = Boolean(supportingMessage?.text?.trim())\n\n const describedPrimaryButton = hasSupportingMessage\n ? cloneElement(primaryButton, {\n 'aria-describedby': [\n primaryButton.props['aria-describedby'],\n supportingTextId,\n ]\n .filter(Boolean)\n .join(' '),\n })\n : primaryButton\n\n // DOM order follows the visual order so keyboard focus moves the way the buttons read\n const buttons =\n orientation === 'horizontal'\n ? [tertiaryButton, secondaryButton, describedPrimaryButton]\n : [describedPrimaryButton, secondaryButton, tertiaryButton]\n\n return (\n <>\n {pinned && <Spacer aria-hidden=\"true\" $height={containerHeight} />}\n <Container ref={containerRef} className={className} $pinned={pinned}>\n <ButtonGroup $orientation={orientation}>\n {buttons.map(\n (button, index) =>\n button && <Fragment key={index}>{button}</Fragment>,\n )}\n </ButtonGroup>\n {supportingMessage && hasSupportingMessage && (\n <SupportingText id={supportingTextId}>\n {supportingMessage.icon && (\n <SupportingIconContainer>\n <FontAwesomeIcon\n icon={supportingMessage.icon}\n color={theme.color.icon.subtle}\n />\n </SupportingIconContainer>\n )}\n {supportingMessage.text}\n </SupportingText>\n )}\n </Container>\n </>\n )\n}\n\nconst desktopMediaQuery = '@media (min-width: 768px)'\nconst desktopVerticalButtonMaxWidth = '400px'\nconst desktopHorizontalButtonMinWidth = '160px'\n\nconst Spacer = styled.div<{ $height: number }>(\n ({ $height }) => css`\n height: ${$height}px;\n\n ${desktopMediaQuery} {\n display: none;\n }\n `,\n)\n\nconst Container = styled.div<{ $pinned: boolean }>(\n ({ theme, $pinned }) => css`\n display: flex;\n flex-direction: column;\n gap: ${theme.space[150]};\n width: 100%;\n // The library ships no CSS reset, so keep the pinned padding inside the viewport width\n box-sizing: border-box;\n\n ${\n $pinned &&\n css`\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: ${theme.elevation.floating};\n padding: ${theme.space[200]};\n padding-bottom: calc(\n ${theme.space[200]} + env(safe-area-inset-bottom, 0px)\n );\n background-color: ${theme.color.surface.base[200]};\n border-radius: ${theme.radius[200]} ${theme.radius[200]} 0 0;\n\n ${desktopMediaQuery} {\n position: static;\n z-index: auto;\n padding: 0;\n background-color: transparent;\n border-radius: 0;\n }\n `\n }\n `,\n)\n\n// On desktop, horizontal buttons all match the width of the longest label\nconst ButtonGroup = styled.div<{ $orientation: ButtonContainerOrientation }>(\n ({ theme, $orientation }) => css`\n display: grid;\n gap: ${theme.space[150]};\n\n ${\n $orientation === 'vertical' &&\n css`\n ${desktopMediaQuery} {\n grid-template-columns: minmax(0, ${desktopVerticalButtonMaxWidth});\n justify-content: center;\n }\n `\n }\n\n ${\n $orientation === 'horizontal' &&\n css`\n grid-auto-flow: column;\n grid-auto-columns: minmax(0, 1fr);\n\n // On desktop the buttons share the width of the longest label, centred\n ${desktopMediaQuery} {\n grid-auto-columns: minmax(${desktopHorizontalButtonMinWidth}, 1fr);\n width: fit-content;\n max-width: 100%;\n margin: 0 auto;\n }\n `\n }\n `,\n)\n\n// Figma icons use Font Awesome's square \"full\" bounding box (640 units),\n// in which the glyph's 512 unit em height takes up 80% of the box\nconst SupportingIconContainer = styled.span(\n ({ theme }) => css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n margin-right: ${theme.space['050']};\n vertical-align: top;\n\n svg {\n width: 100%;\n height: 80%;\n overflow: visible;\n }\n `,\n)\n\nconst SupportingText = styled.p(\n ({ theme }) => css`\n margin: 0;\n font-size: ${theme.font.body[200].fontSize};\n font-weight: ${theme.font.body[200].fontWeight};\n line-height: ${theme.font.body[200].lineHeight};\n color: ${theme.color.text.subtle};\n text-align: center;\n `,\n)\n"]}
1
+ {"version":3,"file":"ButtonContainer.js","sourceRoot":"","sources":["../../src/ButtonContainer/ButtonContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,QAAQ,EAER,YAAY,EACZ,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAwChE,MAAM,CAAC,MAAM,eAAe,GAA6B,CAAC,EACxD,SAAS,EACT,aAAa,EACb,eAAe,EACf,cAAc,EACd,WAAW,GAAG,UAAU,EACxB,KAAK,GAAG,QAAQ,EAChB,iBAAiB,EACjB,MAAM,GAAG,IAAI,GACd,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,gBAAgB,GAAG,KAAK,EAAE,CAAA;IAChC,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACjD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAEzD,oFAAoF;IACpF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,YAAY,CAAC,OAAO,CAAA;QACpC,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,IAAI,OAAO,cAAc,KAAK,WAAW;YAAE,OAAM;QAExE,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YACvC,kBAAkB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC,CAAA;QAC5D,CAAC,CAAC,CAAA;QACF,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;QAEzB,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAA;IACpC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,MAAM,oBAAoB,GAAG,OAAO,CAAC,iBAAiB,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAA;IAErE,MAAM,sBAAsB,GAAG,oBAAoB;QACjD,CAAC,CAAC,YAAY,CAAC,aAAa,EAAE;YAC1B,kBAAkB,EAAE;gBAClB,aAAa,CAAC,KAAK,CAAC,kBAAkB,CAAC;gBACvC,gBAAgB;aACjB;iBACE,MAAM,CAAC,OAAO,CAAC;iBACf,IAAI,CAAC,GAAG,CAAC;SACb,CAAC;QACJ,CAAC,CAAC,aAAa,CAAA;IAEjB,sFAAsF;IACtF,MAAM,OAAO,GACX,WAAW,KAAK,YAAY;QAC1B,CAAC,CAAC,CAAC,cAAc,EAAE,eAAe,EAAE,sBAAsB,CAAC;QAC3D,CAAC,CAAC,CAAC,sBAAsB,EAAE,eAAe,EAAE,cAAc,CAAC,CAAA;IAE/D,OAAO,CACL,8BACG,MAAM,IAAI,KAAC,MAAM,mBAAa,MAAM,EAAC,OAAO,EAAE,eAAe,GAAI,EAClE,MAAC,SAAS,IAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,aACjE,KAAC,WAAW,IAAC,YAAY,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,YAClD,OAAO,CAAC,GAAG,CACV,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAChB,MAAM,IAAI,KAAC,QAAQ,cAAc,MAAM,IAAd,KAAK,CAAqB,CACtD,GACW,EACb,iBAAiB,IAAI,oBAAoB,IAAI,CAC5C,MAAC,cAAc,IAAC,EAAE,EAAE,gBAAgB,EAAE,MAAM,EAAE,KAAK,aAChD,iBAAiB,CAAC,IAAI,IAAI,CACzB,KAAC,uBAAuB,cACtB,KAAC,eAAe,IACd,IAAI,EAAE,iBAAiB,CAAC,IAAI,EAC5B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAC9B,GACsB,CAC3B,EACA,iBAAiB,CAAC,IAAI,IACR,CAClB,IACS,IACX,CACJ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,iBAAiB,GAAG,2BAA2B,CAAA;AAErD,MAAM,iBAAiB,GAA6C;IAClE,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,YAAY;IACnB,GAAG,EAAE,YAAY;CAClB,CAAA;AACD,MAAM,6BAA6B,GAAG,OAAO,CAAA;AAC7C,MAAM,+BAA+B,GAAG,OAAO,CAAA;AAE/C,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CACvB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;cACR,OAAO;;MAEf,iBAAiB;;;GAGpB,CACF,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAC1B,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;WAGlB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;MAMrB,OAAO;IACP,GAAG,CAAA;;;;;mBAKU,KAAK,CAAC,SAAS,CAAC,QAAQ;mBACxB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;YAEvB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;4BAEA,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;yBAChC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;;UAErD,iBAAiB;;;;;;;OAQvB;GACD,CACF,CAAA;AAED,0EAA0E;AAC1E,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAI5B,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;WAE/B,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;MAGrB,YAAY,KAAK,UAAU;IAC3B,GAAG,CAAA;UACC,iBAAiB;6CACkB,6BAA6B;6BAC7C,MAAM;;OAG/B;;MAGE,YAAY,KAAK,YAAY;IAC7B,GAAG,CAAA;;;;;UAKC,iBAAiB;sCACW,+BAA+B;;;oBAGjD,iBAAiB,CAAC,MAAM,CAAC;;OAGzC;GACD,CACF,CAAA;AAED,yEAAyE;AACzE,kEAAkE;AAClE,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,CACzC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;;oBAMA,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;GAQnC,CACF,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAC7B,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;iBAEX,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ;mBAC3B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,UAAU;mBAC/B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,UAAU;aACrC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM;;;MAI9B,MAAM,KAAK,QAAQ;IACnB,GAAG,CAAA;UACC,iBAAiB;wBACH,MAAM;;OAG1B;GACD,CACF,CAAA","sourcesContent":["import {\n FC,\n Fragment,\n ReactElement,\n cloneElement,\n useEffect,\n useId,\n useRef,\n useState,\n} from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\n\ntype ButtonElement = ReactElement<{ 'aria-describedby'?: string }>\n\nexport type ButtonContainerOrientation = 'vertical' | 'horizontal'\n\nexport type ButtonContainerAlignment = 'center' | 'start' | 'end'\n\nexport type ButtonContainerSupportingMessage = {\n /** Short plain text, e.g. reassurance copy. Required, so an icon never shows on its own */\n text: string\n /** Optional decorative icon shown before the text */\n icon?: IconDefinition\n}\n\nexport type ButtonContainerProps = {\n className?: string\n /** Main action. Shown first when vertical, last (right) when horizontal */\n primaryButton: ButtonElement\n /** Optional supporting action */\n secondaryButton?: ButtonElement\n /** Optional low-emphasis action. Shown last when vertical, first (left) when horizontal */\n tertiaryButton?: ButtonElement\n /** Stack the buttons vertically or lay them out side by side */\n orientation?: ButtonContainerOrientation\n /**\n * Where the buttons and supporting text sit from 768px up. Use `start` or\n * `end` to line them up with the edge of the page content. On mobile they\n * fill the width.\n */\n align?: ButtonContainerAlignment\n /** Optional message shown below the buttons, e.g. reassurance copy */\n supportingMessage?: ButtonContainerSupportingMessage\n /**\n * Pin the container to the bottom of the viewport on mobile.\n * On larger screens it always sits in the page flow.\n */\n pinned?: boolean\n}\n\nexport const ButtonContainer: FC<ButtonContainerProps> = ({\n className,\n primaryButton,\n secondaryButton,\n tertiaryButton,\n orientation = 'vertical',\n align = 'center',\n supportingMessage,\n pinned = true,\n}) => {\n const theme = useTheme()\n const supportingTextId = useId()\n const containerRef = useRef<HTMLDivElement>(null)\n const [containerHeight, setContainerHeight] = useState(0)\n\n // Reserve the pinned container's height in the page flow so it never covers content\n useEffect(() => {\n const element = containerRef.current\n if (!pinned || !element || typeof ResizeObserver === 'undefined') return\n\n const observer = new ResizeObserver(() => {\n setContainerHeight(element.getBoundingClientRect().height)\n })\n observer.observe(element)\n\n return () => observer.disconnect()\n }, [pinned])\n\n const hasSupportingMessage = Boolean(supportingMessage?.text?.trim())\n\n const describedPrimaryButton = hasSupportingMessage\n ? cloneElement(primaryButton, {\n 'aria-describedby': [\n primaryButton.props['aria-describedby'],\n supportingTextId,\n ]\n .filter(Boolean)\n .join(' '),\n })\n : primaryButton\n\n // DOM order follows the visual order so keyboard focus moves the way the buttons read\n const buttons =\n orientation === 'horizontal'\n ? [tertiaryButton, secondaryButton, describedPrimaryButton]\n : [describedPrimaryButton, secondaryButton, tertiaryButton]\n\n return (\n <>\n {pinned && <Spacer aria-hidden=\"true\" $height={containerHeight} />}\n <Container ref={containerRef} className={className} $pinned={pinned}>\n <ButtonGroup $orientation={orientation} $align={align}>\n {buttons.map(\n (button, index) =>\n button && <Fragment key={index}>{button}</Fragment>,\n )}\n </ButtonGroup>\n {supportingMessage && hasSupportingMessage && (\n <SupportingText id={supportingTextId} $align={align}>\n {supportingMessage.icon && (\n <SupportingIconContainer>\n <FontAwesomeIcon\n icon={supportingMessage.icon}\n color={theme.color.icon.subtle}\n />\n </SupportingIconContainer>\n )}\n {supportingMessage.text}\n </SupportingText>\n )}\n </Container>\n </>\n )\n}\n\nconst desktopMediaQuery = '@media (min-width: 768px)'\n\nconst horizontalMargins: Record<ButtonContainerAlignment, string> = {\n center: '0 auto',\n start: '0 auto 0 0',\n end: '0 0 0 auto',\n}\nconst desktopVerticalButtonMaxWidth = '400px'\nconst desktopHorizontalButtonMinWidth = '160px'\n\nconst Spacer = styled.div<{ $height: number }>(\n ({ $height }) => css`\n height: ${$height}px;\n\n ${desktopMediaQuery} {\n display: none;\n }\n `,\n)\n\nconst Container = styled.div<{ $pinned: boolean }>(\n ({ theme, $pinned }) => css`\n display: flex;\n flex-direction: column;\n gap: ${theme.space[150]};\n width: 100%;\n // The library ships no CSS reset, so keep the pinned padding inside the viewport width\n box-sizing: border-box;\n\n ${\n $pinned &&\n css`\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: ${theme.elevation.floating};\n padding: ${theme.space[200]};\n padding-bottom: calc(\n ${theme.space[200]} + env(safe-area-inset-bottom, 0px)\n );\n background-color: ${theme.color.surface.base[200]};\n border-radius: ${theme.radius[200]} ${theme.radius[200]} 0 0;\n\n ${desktopMediaQuery} {\n position: static;\n z-index: auto;\n padding: 0;\n background-color: transparent;\n border-radius: 0;\n }\n `\n }\n `,\n)\n\n// On desktop, horizontal buttons all match the width of the longest label\nconst ButtonGroup = styled.div<{\n $orientation: ButtonContainerOrientation\n $align: ButtonContainerAlignment\n}>(\n ({ theme, $orientation, $align }) => css`\n display: grid;\n gap: ${theme.space[150]};\n\n ${\n $orientation === 'vertical' &&\n css`\n ${desktopMediaQuery} {\n grid-template-columns: minmax(0, ${desktopVerticalButtonMaxWidth});\n justify-content: ${$align};\n }\n `\n }\n\n ${\n $orientation === 'horizontal' &&\n css`\n grid-auto-flow: column;\n grid-auto-columns: minmax(0, 1fr);\n\n // On desktop the buttons share the width of the longest label\n ${desktopMediaQuery} {\n grid-auto-columns: minmax(${desktopHorizontalButtonMinWidth}, 1fr);\n width: fit-content;\n max-width: 100%;\n margin: ${horizontalMargins[$align]};\n }\n `\n }\n `,\n)\n\n// Figma icons use Font Awesome's square \"full\" bounding box (640 units),\n// in which the glyph's 512 unit em height takes up 80% of the box\nconst SupportingIconContainer = styled.span(\n ({ theme }) => css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n margin-right: ${theme.space['050']};\n vertical-align: top;\n\n svg {\n width: 100%;\n height: 80%;\n overflow: visible;\n }\n `,\n)\n\nconst SupportingText = styled.p<{ $align: ButtonContainerAlignment }>(\n ({ theme, $align }) => css`\n margin: 0;\n font-size: ${theme.font.body[200].fontSize};\n font-weight: ${theme.font.body[200].fontWeight};\n line-height: ${theme.font.body[200].lineHeight};\n color: ${theme.color.text.subtle};\n text-align: center;\n\n ${\n $align !== 'center' &&\n css`\n ${desktopMediaQuery} {\n text-align: ${$align};\n }\n `\n }\n `,\n)\n"]}
package/dist/ButtonContainer/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export { ButtonContainer } from './ButtonContainer';
2
- export type { ButtonContainerOrientation, ButtonContainerProps, ButtonContainerSupportingMessage, } from './ButtonContainer';
2
+ export type { ButtonContainerAlignment, ButtonContainerOrientation, ButtonContainerProps, ButtonContainerSupportingMessage, } from './ButtonContainer';
package/dist/ButtonContainer/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ButtonContainer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA","sourcesContent":["export { ButtonContainer } from './ButtonContainer'\nexport type {\n ButtonContainerOrientation,\n ButtonContainerProps,\n ButtonContainerSupportingMessage,\n} from './ButtonContainer'\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ButtonContainer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA","sourcesContent":["export { ButtonContainer } from './ButtonContainer'\nexport type {\n ButtonContainerAlignment,\n ButtonContainerOrientation,\n ButtonContainerProps,\n ButtonContainerSupportingMessage,\n} from './ButtonContainer'\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mrshmllw/smores-react",
3
- "version": "16.9.0",
3
+ "version": "16.10.0",
4
4
  "description": "Collection of React components used by Marshmallow Technology",
5
5
  "main": "./dist/index.js",
6
6
  "type": "module",
@@ -68,7 +68,7 @@
68
68
  "devDependencies": {
69
69
  "@commitlint/cli": "^21.2.3",
70
70
  "@mrshmllw/campfire": "^7.1.0",
71
- "@snyk/protect": "^1.1307.4",
71
+ "@snyk/protect": "^1.1308.0",
72
72
  "@storybook/addon-a11y": "^10.6.1",
73
73
  "@storybook/addon-coverage": "^3.0.2",
74
74
  "@storybook/addon-docs": "^10.6.1",
@@ -82,7 +82,7 @@
82
82
  "@types/react": "^19.3.0",
83
83
  "@types/react-dom": "^19.3.0",
84
84
  "axe-playwright": "^2.2.2",
85
- "concurrently": "^10.0.5",
85
+ "concurrently": "^10.0.6",
86
86
  "eslint-plugin-prettier": "^5.5.6",
87
87
  "husky": "^9.1.7",
88
88
  "jest-styled-components": "^7.4.0",