@hero-design/rn 7.19.0 → 7.20.0

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -22,6 +22,7 @@ Object {
         "divider": "#e8e9ea",
         "error": "#f46363",
         "info": "#b5c3fd",
+        "notification": "#ffffff",
         "success": "#5ace7d",
         "warning": "#ffbe71",
       },
@@ -32,7 +33,10 @@ Object {
         "height": 48,
       },
       "space": Object {
-        "padding": 16,
+        "contentPaddingHorizontal": 12,
+        "ctaPadding": 12,
+        "iconLeftPadding": 12,
+        "textPaddingHorizontal": 12,
       },
     },
     "avatar": Object {
@@ -54,6 +58,7 @@ Object {
         "xxlarge": 32,
         "xxxlarge": 36,
         "xxxxlarge": 48,
+        "xxxxxlarge": 60,
       },
       "radii": Object {
         "rounded": 999,
@@ -66,6 +71,7 @@ Object {
         "xxlarge": 64,
         "xxxlarge": 80,
         "xxxxlarge": 96,
+        "xxxxxlarge": 136,
       },
     },
     "badge": Object {
@@ -227,14 +233,13 @@ Object {
     },
     "card": Object {
       "colors": Object {
+        "archived": "#bfc1c5",
+        "danger": "#e3602a",
         "dataCardIndicator": "#8505a2",
-        "indicator": Object {
-          "archived": "#bfc1c5",
-          "danger": "#e3602a",
-          "info": "#b5c3fd",
-          "success": "#5ace7d",
-          "warning": "#ffbe71",
-        },
+        "info": "#b5c3fd",
+        "primary": "#c38cee",
+        "success": "#5ace7d",
+        "warning": "#ffbe71",
       },
       "radii": Object {
         "default": 12,
@@ -547,7 +552,7 @@ Object {
     },
     "sectionHeading": Object {
       "colors": Object {
-        "background": "#e8e9ea",
+        "background": "#f6f6f7",
       },
       "space": Object {
         "headingHorizontalPadding": 16,
@@ -574,16 +579,28 @@ Object {
       },
     },
     "spinner": Object {
-      "color": Object {
-        "default": "#8505a2",
+      "colors": Object {
+        "dot1": "#795e90",
+        "dot2": "#a08cb0",
+        "dot3": "#d9d1df",
+        "dot4": "#ece8ef",
       },
       "radii": Object {
-        "default": 8,
+        "default": 999,
       },
       "space": Object {
-        "spinnerDot": 16,
-        "spinnerDotPadding": 8,
-        "spinnerTextPaddingTop": 8,
+        "spinnerDot": Object {
+          "medium": 16,
+          "small": 8,
+        },
+        "spinnerDotPadding": Object {
+          "medium": 8,
+          "small": 4,
+        },
+        "spinnerTextPaddingTop": Object {
+          "medium": 8,
+          "small": 4,
+        },
       },
     },
     "switch": Object {
@@ -622,8 +639,8 @@ Object {
         "headerBottom": 1,
       },
       "colors": Object {
-        "active": "#8505a2",
-        "activeBackground": "#f3e6f6",
+        "active": "#001f23",
+        "activeBackground": "#ece8ef",
         "headerBottom": "#e8e9ea",
         "inactive": "#001f23",
         "text": "#001f23",
@@ -637,6 +654,7 @@ Object {
       "space": Object {
         "flatListHorizontalPadding": 8,
         "itemHorizontalPadding": 8,
+        "itemMargin": 12,
         "itemVerticalPadding": 8,
         "outlineHorizontalPadding": 8,
         "outlineVerticalPadding": 4,
@@ -655,12 +673,12 @@ Object {
         "defaultBackground": undefined,
         "info": "#4568fb",
         "infoBackground": "#ecf0ff",
-        "primary": "#8505a2",
-        "primaryBackground": "#f3e6f6",
+        "primary": "#001f23",
+        "primaryBackground": undefined,
         "success": "#017d6d",
         "successBackground": "#f0fef4",
         "warning": "#ffa234",
-        "warningBackground": "#ebf4ff",
+        "warningBackground": "#fff6eb",
       },
       "fontSizes": Object {
         "default": 12,
@@ -770,18 +788,34 @@ Object {
         "divider": "#e8e9ea",
         "error": "#f46363",
         "info": "#b5c3fd",
+        "notification": "#ffffff",
+        "shadow": "#001f23",
+        "snackbar": "#001f23",
         "success": "#5ace7d",
         "warning": "#ffbe71",
       },
       "radii": Object {
         "default": 16,
       },
+      "shadows": Object {
+        "elevation": 4,
+        "offset": Object {
+          "height": 2,
+          "width": 0,
+        },
+        "opacity": 0.12,
+        "radius": 4,
+      },
       "sizes": Object {
         "height": 48,
       },
       "space": Object {
-        "largePadding": 24,
-        "mediumPadding": 16,
+        "contentVerticalPadding": 12,
+        "ctaPadding": 12,
+        "iconLeftPadding": 12,
+        "textHorizontalPadding": 12,
+        "wrapperHorizontalPadding": 16,
+        "wrapperVerticalPadding": 24,
       },
     },
     "toolbar": Object {
@@ -819,6 +853,7 @@ Object {
         "medium": 14,
         "small": 12,
         "xlarge": 18,
+        "xxxlarge": 24,
         "xxxxxlarge": 32,
       },
       "fonts": Object {
@@ -831,6 +866,7 @@ Object {
         "medium": 22,
         "small": 20,
         "xlarge": 26,
+        "xxxlarge": 32,
         "xxxxxlarge": 40,
       },
     },
@@ -840,6 +876,23 @@ Object {
     "medium": 2,
   },
   "colors": Object {
+    "__alpha__globalLabel1": "#de350b",
+    "__alpha__globalLabel2": "#ffa234",
+    "__alpha__globalLabel3": "#017d6d",
+    "__alpha__globalLabel4": "#4568fb",
+    "__alpha__globalLabel5": "#737479",
+    "__alpha__globalLabel6": "#fcebe7",
+    "__alpha__globalLabel7": "#fff6eb",
+    "__alpha__globalLabel8": "#f0fef4",
+    "__alpha__globalLabel9": "#ecf0ff",
+    "__alpha__globalNeutral3": "#f6f6f7",
+    "__alpha__globalPrimary": "#001f23",
+    "__alpha__globalSecondary1": "#4d6265",
+    "__alpha__primary2": "#c38cee",
+    "__alpha__secondary1": "#795e90",
+    "__alpha__secondary2": "#a08cb0",
+    "__alpha__secondary3": "#d9d1df",
+    "__alpha__secondary4": "#ece8ef",
     "archived": "#ccced1",
     "archivedBackground": "#f6f6f7",
     "archivedDark": "#737479",
@@ -880,7 +933,7 @@ Object {
     "successLight": "#5ace7d",
     "text": "#001f23",
     "warning": "#ffbe71",
-    "warningBackground": "#ebf4ff",
+    "warningBackground": "#fff6eb",
     "warningDark": "#ffa234",
     "warningLight": "#ffbe71",
   },

package/src/theme/components/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "no-underscore-dangle": 0
+      }
+    }
+  ]
+}

package/src/theme/components/alert.ts

@@ -7,6 +7,7 @@ const getAlertTheme = (theme: GlobalTheme) => {
     warning: theme.colors.warning,
     error: theme.colors.dangerLight,
     info: theme.colors.infoLight,
+    notification: theme.colors.platformBackground,
     divider: theme.colors.outline,
   };
 
@@ -15,7 +16,10 @@ const getAlertTheme = (theme: GlobalTheme) => {
   };
 
   const space = {
-    padding: theme.space.medium,
+    contentPaddingHorizontal: theme.space.smallMedium,
+    textPaddingHorizontal: theme.space.smallMedium,
+    iconLeftPadding: theme.space.smallMedium,
+    ctaPadding: theme.space.smallMedium,
   };
 
   const radii = {

package/src/theme/components/avatar.ts

@@ -17,6 +17,7 @@ const getAvatarTheme = (theme: GlobalTheme) => {
     xxlarge: theme.space.xlarge * 2,
     xxxlarge: theme.space.xxlarge * 2,
     xxxxlarge: theme.space.xxxlarge * 2,
+    xxxxxlarge: theme.space.small * 17,
   };
 
   const fontSizes = {
@@ -27,6 +28,7 @@ const getAvatarTheme = (theme: GlobalTheme) => {
     xxlarge: theme.space.medium * 2,
     xxxlarge: theme.space.large * 1.5,
     xxxxlarge: theme.space.xlarge * 1.5,
+    xxxxxlarge: theme.space.xxlarge * 1.5,
   };
 
   const radii = {

package/src/theme/components/card.ts

@@ -3,13 +3,12 @@ import type { GlobalTheme } from '../global';
 const getCardTheme = (theme: GlobalTheme) => {
   const colors = {
     dataCardIndicator: theme.colors.primary,
-    indicator: {
-      archived: theme.colors.archivedLight,
-      info: theme.colors.infoLight,
-      success: theme.colors.success,
-      warning: theme.colors.warning,
-      danger: theme.colors.dangerMediumLight,
-    },
+    primary: theme.colors.__alpha__primary2,
+    info: theme.colors.infoLight,
+    success: theme.colors.success,
+    warning: theme.colors.warning,
+    danger: theme.colors.dangerMediumLight,
+    archived: theme.colors.archivedLight,
   };
 
   const sizes = {

package/src/theme/components/sectionHeading.ts

@@ -2,7 +2,7 @@ import type { GlobalTheme } from '../global';
 
 const getSectionHeadingTheme = (theme: GlobalTheme) => {
   const colors = {
-    background: theme.colors.outline,
+    background: theme.colors.__alpha__globalNeutral3,
   };
 
   const space = {

package/src/theme/components/spinner.ts

@@ -1,21 +1,33 @@
 import type { GlobalTheme } from '../global';
 
 const getSpinnerTheme = (theme: GlobalTheme) => {
-  const color = {
-    default: theme.colors.primary,
+  const colors = {
+    dot1: theme.colors.__alpha__secondary1,
+    dot2: theme.colors.__alpha__secondary2,
+    dot3: theme.colors.__alpha__secondary3,
+    dot4: theme.colors.__alpha__secondary4,
   };
 
   const space = {
-    spinnerDot: theme.space.medium,
-    spinnerDotPadding: theme.space.small,
-    spinnerTextPaddingTop: theme.space.small,
+    spinnerDot: {
+      small: theme.space.small,
+      medium: theme.space.medium,
+    },
+    spinnerDotPadding: {
+      small: theme.space.xsmall,
+      medium: theme.space.small,
+    },
+    spinnerTextPaddingTop: {
+      small: theme.space.xsmall,
+      medium: theme.space.small,
+    },
   };
 
   const radii = {
-    default: theme.radii.medium,
+    default: theme.radii.rounded,
   };
 
-  return { color, space, radii };
+  return { colors, space, radii };
 };
 
 export default getSpinnerTheme;

package/src/theme/components/tabs.ts

@@ -2,9 +2,9 @@ import type { GlobalTheme } from '../global';
 
 const getTabsTheme = (theme: GlobalTheme) => {
   const colors = {
-    active: theme.colors.primary,
+    active: theme.colors.text,
     inactive: theme.colors.text,
-    activeBackground: theme.colors.primaryBackground,
+    activeBackground: theme.colors.__alpha__secondary4,
     headerBottom: theme.colors.outline,
     text: theme.colors.text,
   };
@@ -13,6 +13,7 @@ const getTabsTheme = (theme: GlobalTheme) => {
     flatListHorizontalPadding: theme.space.small,
     itemHorizontalPadding: theme.space.small,
     itemVerticalPadding: theme.space.small,
+    itemMargin: theme.space.smallMedium,
     outlineHorizontalPadding: theme.space.small,
     outlineVerticalPadding: theme.space.xsmall,
   };

package/src/theme/components/tag.ts

@@ -6,20 +6,20 @@ const getTagTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    default: theme.colors.text,
+    default: theme.colors.__alpha__globalPrimary,
     defaultBackground: undefined,
-    primary: theme.colors.primary,
-    primaryBackground: theme.colors.primaryBackground,
-    info: theme.colors.info,
-    infoBackground: theme.colors.infoBackground,
-    success: theme.colors.successDark,
-    successBackground: theme.colors.successBackground,
-    warning: theme.colors.warningDark,
-    warningBackground: theme.colors.warningBackground,
-    danger: theme.colors.danger,
-    dangerBackground: theme.colors.dangerBackground,
-    archived: theme.colors.archivedDark,
-    archivedBackground: theme.colors.archivedBackground,
+    primary: theme.colors.__alpha__globalPrimary,
+    primaryBackground: undefined,
+    info: theme.colors.__alpha__globalLabel4,
+    infoBackground: theme.colors.__alpha__globalLabel9,
+    success: theme.colors.__alpha__globalLabel3,
+    successBackground: theme.colors.__alpha__globalLabel8,
+    warning: theme.colors.__alpha__globalLabel2,
+    warningBackground: theme.colors.__alpha__globalLabel7,
+    danger: theme.colors.__alpha__globalLabel1,
+    dangerBackground: theme.colors.__alpha__globalLabel6,
+    archived: theme.colors.__alpha__globalLabel5,
+    archivedBackground: theme.colors.__alpha__globalNeutral3,
   };
 
   const fonts = {

package/src/theme/components/toast.ts

@@ -7,7 +7,10 @@ const getToastTheme = (theme: GlobalTheme) => {
     warning: theme.colors.warning,
     error: theme.colors.dangerLight,
     info: theme.colors.infoLight,
+    notification: theme.colors.platformBackground,
+    snackbar: theme.colors.backgroundDark,
     divider: theme.colors.outline,
+    shadow: theme.colors.backgroundDark,
   };
 
   const sizes = {
@@ -15,8 +18,12 @@ const getToastTheme = (theme: GlobalTheme) => {
   };
 
   const space = {
-    mediumPadding: theme.space.medium,
-    largePadding: theme.space.large,
+    wrapperVerticalPadding: theme.space.large,
+    wrapperHorizontalPadding: theme.space.medium,
+    contentVerticalPadding: theme.space.smallMedium,
+    textHorizontalPadding: theme.space.smallMedium,
+    iconLeftPadding: theme.space.smallMedium,
+    ctaPadding: theme.space.smallMedium,
   };
 
   const radii = {
@@ -27,7 +34,14 @@ const getToastTheme = (theme: GlobalTheme) => {
     base: theme.borderWidths.base,
   };
 
-  return { colors, radii, sizes, space, borderWidths };
+  const shadows = {
+    offset: { width: 0, height: 2 },
+    opacity: 0.12,
+    radius: 4,
+    elevation: 4,
+  };
+
+  return { colors, radii, sizes, space, borderWidths, shadows };
 };
 
 export default getToastTheme;

package/src/theme/components/typography.ts

@@ -23,6 +23,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     medium: theme.fontSizes.medium,
     large: theme.fontSizes.large,
     xlarge: theme.fontSizes.xlarge,
+    xxxlarge: theme.fontSizes.xxxlarge,
     xxxxxlarge: theme.fontSizes.xxxxxlarge,
   };
 
@@ -31,6 +32,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     medium: theme.lineHeights.medium,
     large: theme.lineHeights.large,
     xlarge: theme.lineHeights.xlarge,
+    xxxlarge: theme.lineHeights.xxxlarge,
     xxxxxlarge: theme.lineHeights.xxxxxlarge,
   };
 

package/src/theme/global/colors/swag.ts

@@ -48,6 +48,29 @@ const swagSystemPalette: SystemPalette = {
   black: palette.black,
   inactiveBackground: palette.maasstrichtBlueLight50,
   shadow: palette.greyLight45, // waiting for new color
+
+  __alpha__globalPrimary: palette.maasstrichtBlue,
+
+  __alpha__globalSecondary1: palette.maasstrichtBlueLight30,
+
+  __alpha__globalNeutral3: palette.greyLight90,
+
+  __alpha__globalLabel1: palette.vermilion,
+  __alpha__globalLabel2: palette.deepSaffron,
+  __alpha__globalLabel3: palette.pineGreen,
+  __alpha__globalLabel4: palette.ultramarineBlue,
+  __alpha__globalLabel5: palette.sonicSilver,
+  __alpha__globalLabel6: palette.linen,
+  __alpha__globalLabel7: palette.seashell,
+  __alpha__globalLabel8: palette.honeydew,
+  __alpha__globalLabel9: palette.aliceBlue,
+
+  __alpha__primary2: swagPalette.mauve,
+
+  __alpha__secondary1: swagPalette.scarletGumLight30,
+  __alpha__secondary2: swagPalette.scarletGumLight50,
+  __alpha__secondary3: swagPalette.scarletGumLight80,
+  __alpha__secondary4: swagPalette.scarletGumLight90,
 };
 
 export default swagSystemPalette;

package/src/theme/global/colors/types.ts

@@ -42,4 +42,27 @@ export type SystemPalette = {
   black: string;
   inactiveBackground: string;
   shadow: string;
+
+  __alpha__globalPrimary: string;
+
+  __alpha__globalSecondary1: string;
+
+  __alpha__globalNeutral3: string;
+
+  __alpha__globalLabel1: string;
+  __alpha__globalLabel2: string;
+  __alpha__globalLabel3: string;
+  __alpha__globalLabel4: string;
+  __alpha__globalLabel5: string;
+  __alpha__globalLabel6: string;
+  __alpha__globalLabel7: string;
+  __alpha__globalLabel8: string;
+  __alpha__globalLabel9: string;
+
+  __alpha__primary2: string;
+
+  __alpha__secondary1: string;
+  __alpha__secondary2: string;
+  __alpha__secondary3: string;
+  __alpha__secondary4: string;
 };

package/src/theme/global/colors/work.ts

@@ -8,6 +8,11 @@ const workSystemPalette: SystemPalette = {
   primaryLight: workPalette.goldLight50,
   primaryDark: workPalette.goldLight20,
   primaryBackground: workPalette.goldLight90,
+
+  __alpha__secondary1: workPalette.goldLight20,
+  __alpha__secondary2: workPalette.goldLight50,
+  __alpha__secondary3: workPalette.goldLight70,
+  __alpha__secondary4: workPalette.goldLight90,
 };
 
 export default workSystemPalette;

package/tsconfig.json

@@ -1,22 +1,11 @@
 {
+  "extends": "expo/tsconfig.base",
   "compilerOptions": {
     "target": "esnext",
-    "declaration": true,
     "outDir": "types",
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
+    "declaration": true,
     "jsx": "react-native",
-    "strict": true,
-    "allowUnreachableCode": false,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noUnusedLocals": true,
-    "skipLibCheck": true,
-    "isolatedModules": true,
     "types": ["jest"]
   },
-  "include": ["src"],
-  "exclude": ["node_modules"],
-  "extends": "expo/tsconfig.base"
-}
+  "include": ["src"]
+}

package/types/components/Accordion/StyledAccordion.d.ts

@@ -1,32 +1,32 @@
 import { TouchableOpacity, View } from 'react-native';
 export declare type Variant = 'default' | 'card';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 export declare const StyledItemWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeVariant: Variant;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 export declare const StyledHeaderWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
+    ref?: import("react").Ref<TouchableOpacity>;
 }>;
 export declare const StyledCollapse: import("@emotion/native").StyledComponent<import("../Collapse").CollapseProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {}>;
 export declare const Spacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;

package/types/components/Alert/StyledAlert.d.ts

@@ -1,38 +1,38 @@
 import { TouchableOpacity, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 declare const Container: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeVariant: 'default' | 'round';
-    themeIntent: 'success' | 'info' | 'warning' | 'error';
+    themeIntent: 'success' | 'info' | 'warning' | 'error' | 'notification';
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const IconContainer: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const TextContainer: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const ContentContainer: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     showDivider: boolean;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const CTAWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
+    ref?: import("react").Ref<TouchableOpacity>;
 }>;
 export { Container, ContentContainer, TextContainer, IconContainer, CTAWrapper, };

package/types/components/Alert/index.d.ts

@@ -20,7 +20,7 @@ interface AlertProps {
     /**
      * Visual intent color to apply to alert.
      */
-    intent?: 'success' | 'info' | 'warning' | 'error';
+    intent?: 'success' | 'info' | 'warning' | 'error' | 'notification';
     /**
      * Closing callback. When onClose is available, an X button will be rendered on the right side of alert. The callback will be called when user clicks on X button.
      */