@aegov/design-system-react/dist/components/Banner/Banner.stories.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithoutAction = exports.Red = exports.Notice = exports.Dismissible = exports.Default = exports.DarkDismissible = exports.Camel = exports.BottomPosition = void 0;
var _react = _interopRequireDefault(require("react"));
var _Banner = _interopRequireDefault(require("./Banner"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var _default = exports.default = {
  title: 'Components/Banner',
  component: _Banner.default,
  parameters: {
    layout: 'fullscreen'
  },
  decorators: [Story => /*#__PURE__*/_react.default.createElement("div", {
    className: "pt-16 pb-16"
  }, /*#__PURE__*/_react.default.createElement(Story, null))],
  argTypes: {
    position: {
      control: 'select',
      options: ['top', 'bottom']
    },
    variant: {
      control: 'select',
      options: ['default', 'camel', 'red', 'notice', 'dark']
    },
    centered: {
      control: 'boolean',
      defaultValue: true
    },
    onDismiss: {
      action: 'dismissed'
    },
    'action.onClick': {
      action: 'clicked'
    }
  }
}; // Default Banner
const Default = exports.Default = {
  args: {
    children: 'Upgrading your account to be used with UAE Pass is now active.',
    action: {
      text: 'Connect your account to UAE PASS',
      onClick: () => alert('Connecting your account to UAE PASS')
    },
    position: 'top',
    variant: 'default'
  }
};

// Camel Banner
const Camel = exports.Camel = {
  args: {
    children: 'Upgrading your account to be used with UAE Pass is now active.',
    action: {
      text: 'Connect your account to UAE PASS',
      onClick: () => alert('Connecting your account to UAE PASS')
    },
    position: 'top',
    variant: 'camel'
  }
};

// Red Banner
const Red = exports.Red = {
  args: {
    children: 'Discover essential government services and stay informed about policies and initiatives. Your gateway to efficient governance.',
    action: {
      text: 'Learn more',
      onClick: () => alert('Learning more about government services')
    },
    position: 'top',
    variant: 'red',
    centered: false
  }
};

// Notice Banner
const Notice = exports.Notice = {
  args: {
    title: 'We use cookies to personalise this website',
    children: 'Our site enables script (e.g. cookies) that is able to read, store, and write information on your browser and in your device. By using our website, you\'re agreeing to the collection of data as described in our Privacy Policy.',
    action: {
      text: 'Accept',
      onClick: () => alert('Accepted')
    },
    position: 'bottom',
    variant: 'notice'
  }
};

// Dark Banner with Dismiss
const DarkDismissible = exports.DarkDismissible = {
  args: {
    children: 'We are participating at World Government Summit 2023',
    action: {
      text: 'Come join us',
      onClick: () => alert('Joining us at the World Government Summit 2023')
    },
    variant: 'dark',
    isDismissible: true,
    centered: false
  }
};

// Bottom Banner
const BottomPosition = exports.BottomPosition = {
  args: {
    children: 'This is a bottom banner message',
    action: {
      text: 'Take Action',
      onClick: () => alert('Taking action on the bottom banner')
    },
    position: 'bottom'
  }
};

// Banner without Action
const WithoutAction = exports.WithoutAction = {
  args: {
    children: 'This is a banner without any action button'
  }
};

// Dismissible Banner
const Dismissible = exports.Dismissible = {
  args: {
    children: 'This is a dismissible banner',
    isDismissible: true,
    onDismiss: () => alert('Dismissed')
  }
};