sag_components 1.0.976 → 1.0.978

package/dist/stories/components/LinkButton/LinkButton.js

@@ -1,207 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.LinkButton = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _LinkButton = require("./LinkButton.style");
-var _FilterIcon = require("../../icons/FilterIcon");
-var _OptionsIcon = require("../../icons/OptionsIcon");
-var _DownloadIcon = require("../../icons/DownloadIcon");
-var _DocumentIcon = require("../../icons/DocumentIcon");
-var _FlyIcon = require("../../icons/FlyIcon");
-var _BellIcon = require("../../icons/BellIcon");
-var _MaintenanceIcon = require("../../icons/MaintenanceIcon");
-var _ExitIcon = require("../../icons/ExitIcon");
-var _EyeIcon = require("../../icons/EyeIcon");
-var _MenuItemOpenIcon = require("../../icons/MenuItemOpenIcon");
-var _MenuItemRightIcon = require("../../icons/MenuItemRightIcon");
-var _ArrowSelectIcon = _interopRequireDefault(require("../../icons/ArrowSelectIcon"));
-var _InfoIcon = require("../../icons/InfoIcon");
-var _AttachedIcon = require("../../icons/AttachedIcon");
-const LinkButton = props => {
-  const {
-    text,
-    type,
-    size,
-    height,
-    width,
-    disabled,
-    textColor,
-    leftIcon,
-    rightIcon,
-    onClick
-  } = props;
-  const [clicked, setClicked] = (0, _react.useState)(false);
-  const handleLinkButtonClick = () => {
-    setClicked(true);
-    onClick(text);
-    setTimeout(() => {
-      setClicked(false);
-    }, 300);
-  };
-  const getIcon = icon => {
-    const iconHeight = size === 'small' ? '12px' : '13px';
-    const iconWidth = size === 'small' ? '12px' : '13px';
-    const newTextColor = textColor || (type === 'secondary' ? '#212121' : '#229E38');
-    const color = disabled ? '#B1B1B1' : newTextColor;
-    switch (icon.toLowerCase()) {
-      case 'filter':
-        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
-          className: "FilterIcon"
-        }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'options':
-        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
-          className: "OptionsIcon"
-        }, /*#__PURE__*/_react.default.createElement(_OptionsIcon.OptionsIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'download':
-        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
-          className: "DownloadIcon"
-        }, /*#__PURE__*/_react.default.createElement(_DownloadIcon.DownloadIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'document':
-        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
-          className: "DocumentIcon"
-        }, /*#__PURE__*/_react.default.createElement(_DocumentIcon.DocumentIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'fly':
-        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
-          className: "FlyIcon"
-        }, /*#__PURE__*/_react.default.createElement(_FlyIcon.FlyIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'bell':
-        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
-          className: "BellIcon"
-        }, /*#__PURE__*/_react.default.createElement(_BellIcon.BellIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'maintenance':
-        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
-          className: "MaintenanceIcon"
-        }, /*#__PURE__*/_react.default.createElement(_MaintenanceIcon.MaintenanceIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'exit':
-        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
-          className: "ExitIcon"
-        }, /*#__PURE__*/_react.default.createElement(_ExitIcon.ExitIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'eye':
-        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
-          className: "EyeIcon"
-        }, /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'arrowdown':
-        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
-          className: "ArrowDownIcon"
-        }, /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'arrowright':
-        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
-          className: "ArrowRightIcon"
-        }, /*#__PURE__*/_react.default.createElement(_MenuItemRightIcon.MenuItemRightIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'select':
-        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
-          className: "SelectRightIcon"
-        }, /*#__PURE__*/_react.default.createElement(_ArrowSelectIcon.default, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'info':
-        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
-          className: "InfoIcon"
-        }, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      case 'attached':
-        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
-          className: "AttachedIcon"
-        }, /*#__PURE__*/_react.default.createElement(_AttachedIcon.AttachedIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: color
-        }));
-      default:
-        return '';
-    }
-  };
-  const getLeftIcon = () => {
-    if (!leftIcon || leftIcon === 'none') return '';
-    return getIcon(leftIcon);
-  };
-  const getRightIcon = () => {
-    if (!rightIcon || rightIcon === 'none') return '';
-    return getIcon(rightIcon);
-  };
-  return /*#__PURE__*/_react.default.createElement(_LinkButton.LinkButtonContainer, {
-    className: "LinkButtonContainer",
-    width: width || null,
-    height: height || '20px'
-  }, /*#__PURE__*/_react.default.createElement(_LinkButton.LinkButtonItem, {
-    className: clicked ? 'LinkButtonItem-clicked' : 'LinkButtonItem',
-    onClick: !disabled ? handleLinkButtonClick : null,
-    width: width || null,
-    height: height || '20px',
-    disabled: disabled,
-    text_color: textColor || (type === 'secondary' ? '#212121' : '#229E38'),
-    font_size: size === 'small' ? '14px' : '16px'
-  }, getLeftIcon(), /*#__PURE__*/_react.default.createElement(_LinkButton.Label, {
-    className: "Label",
-    disabled: disabled,
-    font_size: size === 'small' ? '14px' : '16px'
-  }, text), getRightIcon()));
-};
-exports.LinkButton = LinkButton;
-var _default = exports.default = LinkButton;
-LinkButton.defaultProps = {
-  text: '',
-  type: 'primary',
-  size: 'small',
-  height: '',
-  width: '',
-  disabled: false,
-  textColor: '',
-  onClick: () => {},
-  leftIcon: 'none',
-  rightIcon: 'none'
-};

package/dist/stories/components/LinkButton/LinkButton.stories.js

@@ -1,180 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SmallButtonTwoIcons = exports.SmallButtonRightIcon = exports.SmallButtonLeftIcon = exports.SecondaryDisabled = exports.SecondaryDefault = exports.PrimaryDisabled = exports.PrimaryDefault = exports.MediumButtonTwoIcons = exports.MediumButtonRightIcon = exports.MediumButtonLeftIcon = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _LinkButton = require("./LinkButton");
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-var _default = exports.default = {
-  title: 'SAG Core/LinkButton',
-  component: _LinkButton.LinkButton,
-  tags: ['autodocs'],
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/hhRW9o3Wqj3wF89qGJ2raZ/Sagarmatha--Design-System?m=dev&node-id=299-4075'
-    }
-  },
-  argTypes: {
-    text: {
-      name: 'text',
-      control: {
-        type: 'text'
-      },
-      description: 'text inside of the button'
-    },
-    type: {
-      control: {
-        type: 'radio'
-      },
-      options: ['primary', 'secondary'],
-      description: 'type of the button'
-    },
-    size: {
-      control: {
-        type: 'radio'
-      },
-      options: ['small', 'medium'],
-      description: 'size of the button'
-    },
-    disabled: {
-      name: 'disabled',
-      control: {
-        type: 'boolean'
-      },
-      description: 'changes the button to be enabled/disabled',
-      defaultValue: ''
-    },
-    textColor: {
-      name: 'textColor',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
-        description: 'Sets text Color'
-      }
-    },
-    onClick: {
-      action: 'onClick',
-      description: 'returns an event click object when user clicks on a button'
-    },
-    leftIcon: {
-      name: 'leftIcon',
-      options: ['none', 'ArrowDown', 'ArrowRight', 'Select', 'Bell', 'Document', 'Download', 'Exit', 'Eye', 'Filter', 'Fly', 'Info', 'Maintenance', 'Options', 'Attached'],
-      control: {
-        type: 'select'
-      },
-      description: 'Choose an icon to apear on the button left side'
-    },
-    rightIcon: {
-      name: 'rightIcon',
-      options: ['none', 'ArrowDown', 'ArrowRight', 'Select', 'Bell', 'Document', 'Download', 'Exit', 'Eye', 'Filter', 'Fly', 'Info', 'Maintenance', 'Options', 'Attached'],
-      control: {
-        type: 'select'
-      },
-      description: 'Choose an icon to apear on the button right side'
-    }
-  }
-};
-const PrimaryDefault = exports.PrimaryDefault = {
-  args: {
-    text: 'LinkButton',
-    type: 'primary',
-    size: 'small',
-    disabled: false,
-    leftIcon: 'none',
-    rightIcon: 'none'
-  }
-};
-const PrimaryDisabled = exports.PrimaryDisabled = {
-  args: {
-    text: 'LinkButton',
-    type: 'primary',
-    size: 'small',
-    disabled: true,
-    leftIcon: 'none',
-    rightIcon: 'none'
-  }
-};
-const SecondaryDefault = exports.SecondaryDefault = {
-  args: {
-    text: 'LinkButton',
-    type: 'secondary',
-    size: 'small',
-    disabled: false,
-    leftIcon: 'none',
-    rightIcon: 'none'
-  }
-};
-const SecondaryDisabled = exports.SecondaryDisabled = {
-  args: {
-    text: 'LinkButton',
-    type: 'secondary',
-    size: 'small',
-    disabled: true,
-    leftIcon: 'none',
-    rightIcon: 'none'
-  }
-};
-const SmallButtonTwoIcons = exports.SmallButtonTwoIcons = {
-  arg: {
-    text: 'LinkButton',
-    type: 'primary',
-    size: 'small',
-    disabled: false,
-    leftIcon: 'Filter',
-    rightIcon: 'Exit'
-  }
-};
-const SmallButtonLeftIcon = exports.SmallButtonLeftIcon = {
-  args: {
-    text: 'LinkButton',
-    type: 'primary',
-    size: 'small',
-    disabled: false,
-    leftIcon: 'Download',
-    rightIcon: 'none'
-  }
-};
-const SmallButtonRightIcon = exports.SmallButtonRightIcon = {
-  args: {
-    text: 'LinkButton',
-    type: 'primary',
-    size: 'small',
-    disabled: false,
-    leftIcon: 'none',
-    rightIcon: 'Exit'
-  }
-};
-const MediumButtonTwoIcons = exports.MediumButtonTwoIcons = {
-  args: {
-    text: 'LinkButton',
-    type: 'primary',
-    size: 'medium',
-    disabled: false,
-    leftIcon: 'Filter',
-    rightIcon: 'Exit'
-  }
-};
-const MediumButtonLeftIcon = exports.MediumButtonLeftIcon = {
-  args: {
-    text: 'LinkButton',
-    type: 'primary',
-    size: 'medium',
-    disabled: false,
-    leftIcon: 'Download',
-    rightIcon: 'none'
-  }
-};
-const MediumButtonRightIcon = exports.MediumButtonRightIcon = {
-  args: {
-    text: 'LinkButton',
-    type: 'primary',
-    size: 'medium',
-    disabled: false,
-    leftIcon: 'none',
-    rightIcon: 'Exit'
-  }
-};

package/dist/stories/components/LinkButton/LinkButton.style.js

@@ -1,53 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LinkButtonItem = exports.LinkButtonContainer = exports.Label = exports.IconWrapper = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const LinkButtonContainer = exports.LinkButtonContainer = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-content: center;  
-  width: ${props => props.width};
-  height: ${props => props.height};
-`;
-const LinkButtonItem = exports.LinkButtonItem = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-content: center;
-  flex-wrap: nowrap;
-  overflow: hidden;
-  width: ${props => props.width};
-  height: ${props => props.height};  
-  color: ${props => props.disabled ? '#B1B1B1' : props.text_color};    
-  box-sizing: border-box;
-  gap: 8px;  
-  padding: 0 4px; 
-  font-size: ${props => props.font_size};
-  font-family: 'Poppins';
-  font-style: normal;
-  font-weight: 400;      
-  &:hover {   
-    color: ${props => props.disabled ? '#B1B1B1' : props.text_color};       
-    text-decoration: ${props => props.disabled ? '' : 'underline'}; 
-    cursor: ${props => !props.disabled ? 'pointer' : 'default'};
-  }
-  &.LinkButtonItem-clicked {   
-    cursor: pointer;  
-    transition: background-color 0.3s, color 0.3s;
-  }
-`;
-const Label = exports.Label = _styledComponents.default.label` 
-  user-select: none;   
-  pointer-events: none;
-`;
-const IconWrapper = exports.IconWrapper = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-content: center;  
-`;

package/dist/stories/components/LinnerDataBox/LinnerDataBox.js

@@ -1,46 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.LinnerDataBox = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _LinnerDataBox = require("./LinnerDataBox.style");
-var _CommonFunctions = require("../../utils/CommonFunctions");
-/* eslint-disable no-restricted-globals */
-
-const LinnerDataBox = props => {
-  const {
-    width,
-    height,
-    data,
-    backgroundColor,
-    className
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(_LinnerDataBox.LinnerContainer, {
-    className: className,
-    backgroundColor: backgroundColor,
-    width: width || '100%',
-    height: height || '200px'
-  }, data.map((item, index) => /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxWrap, {
-    width: `${100 / data.length}%`
-  }, /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBox, null, item.title && /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxTitle, null, item.title), /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContent, null, item.value !== null && item.value !== undefined && !isNaN(item.value) && item.value !== 'null' && item.value !== 'undefined' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.sign && /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContentSign, null, item.sign), /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContentValue, null, ''.concat((0, _CommonFunctions.getFormattedValue)(item.value), (0, _CommonFunctions.getFormattedUnits)(item.value)))) : /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContentNoValue, null, "No Data")), item.extraInfo.map(extraInfoItem => /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCell, null, extraInfoItem.value !== null && extraInfoItem.value !== undefined && /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCellValue, null, ''.concat('$', (0, _CommonFunctions.getFormattedValue)(extraInfoItem.value), (0, _CommonFunctions.getFormattedUnits)(extraInfoItem.value))), extraInfoItem.value !== null && extraInfoItem.value !== undefined && /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCellTitle, null, extraInfoItem.title)))), index < data.length - 1 && /*#__PURE__*/_react.default.createElement("div", {
-    className: "vertival-line",
-    style: {
-      width: '1px',
-      minHeight: '100px',
-      height: '100%',
-      backgroundColor: '#D0D0D0'
-    }
-  }))));
-};
-exports.LinnerDataBox = LinnerDataBox;
-var _default = exports.default = LinnerDataBox;
-LinnerDataBox.defaultProps = {
-  className: '',
-  width: '100%',
-  height: 'auto',
-  data: [],
-  backgroundColor: '#FFFFFF'
-};

package/dist/stories/components/LinnerDataBox/LinnerDataBox.stories.js

@@ -1,78 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.LinnerDataBoxDefault = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _LinnerDataBox = require("./LinnerDataBox");
-const data = [{
-  title: 'Total Cost',
-  value: null,
-  sign: '$',
-  extraInfo: [{
-    value: 7000,
-    title: 'Package cost'
-  }, {
-    value: null,
-    title: 'Redemption cost'
-  }]
-}, {
-  title: 'Actual Sales',
-  value: 150000.6,
-  sign: '$',
-  extraInfo: []
-}, {
-  title: 'Incremental Sales',
-  value: undefined,
-  sign: '$',
-  extraInfo: []
-}, {
-  title: 'Actual Sales ROI',
-  value: undefined,
-  sign: 'x',
-  extraInfo: []
-}, {
-  title: 'Incremental Sales ROI',
-  value: null,
-  sign: 'x',
-  extraInfo: []
-}];
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-var _default = exports.default = {
-  title: 'SAG BI/LinnerDataBox',
-  component: _LinnerDataBox.LinnerDataBox,
-  tags: ['autodocs'],
-  argTypes: {
-    width: {
-      name: 'Width',
-      control: {
-        type: 'text'
-      },
-      description: 'width of the control (in px / %)'
-    },
-    height: {
-      name: 'Height',
-      control: {
-        type: 'text'
-      },
-      description: 'height of the control (in px / %)'
-    },
-    backgroundColor: {
-      name: 'Background Color',
-      control: {
-        type: 'color'
-      },
-      description: 'Background color of the control'
-    }
-  }
-};
-const LinnerDataBoxDefault = exports.LinnerDataBoxDefault = Template.bind({});
-LinnerDataBoxDefault.args = {
-  data,
-  width: '100%',
-  height: 'auto',
-  backgroundColor: 'white'
-};

package/dist/stories/components/LinnerDataBox/LinnerDataBox.style.js

@@ -1,68 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LinnerContainer = exports.DataBoxWrap = exports.DataBoxTitle = exports.DataBoxExtraInfoCellValue = exports.DataBoxExtraInfoCellTitle = exports.DataBoxExtraInfoCell = exports.DataBoxExtraInfo = exports.DataBoxContentValue = exports.DataBoxContentSign = exports.DataBoxContentNoValue = exports.DataBoxContent = exports.DataBox = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const LinnerContainer = exports.LinnerContainer = _styledComponents.default.div`
-  font-family: "Poppins", sans-serif;
-  display: flex;
-  justify-content: space-between;
-  width: ${props => props.width};
-  height: ${props => props.height};
-  background-color: ${props => props.backgroundColor};
-  padding: 50px 40px 30px;
-`;
-const DataBoxWrap = exports.DataBoxWrap = _styledComponents.default.div`
-  display: flex;
-  gap: 10px;
-  justify-content: space-around;
-  align-items: stretch;
-  width: ${props => props.width};
-  height: 100%;
-`;
-const DataBox = exports.DataBox = _styledComponents.default.div`
-  color: #212121;
-  font-weight: 400;
-`;
-const DataBoxTitle = exports.DataBoxTitle = _styledComponents.default.span`
-  font-size: 18px;
-  font-weight: 500;
-`;
-const DataBoxContent = exports.DataBoxContent = _styledComponents.default.div`
-  display: flex;
-  align-items: baseline;
-`;
-const DataBoxContentSign = exports.DataBoxContentSign = _styledComponents.default.span`
-  font-size: 18px;
-  font-weight: 500;
-`;
-const DataBoxContentValue = exports.DataBoxContentValue = _styledComponents.default.span`
-  font-size: 40px;
-  font-weight: 500;
-`;
-const DataBoxContentNoValue = exports.DataBoxContentNoValue = _styledComponents.default.span`
-  font-size: 18px;
-  font-weight: 500;
-  margin: 20px auto 0;
-`;
-const DataBoxExtraInfo = exports.DataBoxExtraInfo = _styledComponents.default.div`
-  display: flex;
-  flex-direction: column;
-`;
-const DataBoxExtraInfoCell = exports.DataBoxExtraInfoCell = _styledComponents.default.div`
-  display: flex;
-  gap: 5px;
-`;
-const DataBoxExtraInfoCellTitle = exports.DataBoxExtraInfoCellTitle = _styledComponents.default.div`
-  color: #999;
-  font-size: 12px;
-  text-transform: uppercase;
-`;
-const DataBoxExtraInfoCellValue = exports.DataBoxExtraInfoCellValue = _styledComponents.default.div`
-  color: #999;
-  font-size: 12px;
-  text-transform: uppercase;
-`;