sag_components 1.0.1021 → 1.0.1022

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

@@ -1,90 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Label = exports.InputCommit = exports.IconWrapper = exports.ButtonItem = exports.ButtonContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div`
-  //position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-content: center;
-  width: ${props => props.width};
-  height: ${props => props.height};
-`;
-const ButtonItem = exports.ButtonItem = _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 ? props.disabled_text_color : props.text_color};
-  border: ${props => `1px solid ${props.disabled ? props.disabled_border_color : props.border_color}`};
-  border-radius: 12px;
-  background-color: ${props => props.disabled ? props.disabled_background_color : props.background_color};
-  box-sizing: border-box;
-  gap: 8px;
-  padding: ${props => props.padding};
-  &:hover {
-    background-color: ${props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color};
-    border-color: ${props => props.disabled ? props.disabled_border_color : props.hover_border_color};
-    color: ${props => props.disabled ? props.disabled_text_color : props.hover_text_color};
-    box-shadow: ${props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)'};
-    cursor: ${props => !props.disabled ? 'pointer' : 'default'};
-  }
-  &.ButtonItem-clicked {
-    background-color: ${props => props.background_color};
-    cursor: pointer;
-    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
-    transition: background-color 0.3s, color 0.3s;
-  }
-`;
-const Label = exports.Label = _styledComponents.default.label`
-  font-family: "Poppins";
-  font-style: normal;
-  font-weight: 400;
-  pointer-events: none;
-  font-size: 14px;
-  user-select: none;
-`;
-const IconWrapper = exports.IconWrapper = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-content: center;
-`;
-const InputCommit = exports.InputCommit = _styledComponents.default.input`
-  font-family: "Poppins", sans-serif;
-  border: ${props => `0px solid ${props.disabled ? props.disabled_border_color : props.hover_border_color}`};
-  border-radius: 8px;
-  font-weight: 400;
-  font-size: 14px;
-  width: ${props => props.width};
-  height: ${props => props.height};
-  color: ${props => props.disabled ? props.disabled_text_color : props.text_color};
-  border: ${props => `1px solid ${props.disabled ? props.disabled_border_color : props.border_color}`};
-  border-radius: 12px;
-  background-color: ${props => props.disabled ? props.disabled_background_color : props.background_color};
-  cursor: pointer;
-  padding: ${props => props.padding};
-
-  &:hover {
-    background-color: ${props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color};
-    border-color: ${props => props.disabled ? props.disabled_border_color : props.hover_border_color};
-    color: ${props => props.disabled ? props.disabled_text_color : props.hover_text_color};
-    box-shadow: ${props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)'};
-    cursor: ${props => !props.disabled ? 'pointer' : 'default'};
-  }
-  &.InputCommit-clicked {
-    background-color: ${props => props.background_color};
-    cursor: pointer;
-    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
-    transition: background-color 0.3s, color 0.3s;
-  }
-`;

package/dist/stories/components/CampaignDemoReport/CampaignDemoReport.js

@@ -1,48 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _CampaignDemoReport = require("./CampaignDemoReport.style");
-var _ShoutIcon = _interopRequireDefault(require("../../icons/ShoutIcon"));
-const CampaignDemoReport = props => {
-  const {
-    topHeadline,
-    topLabels,
-    bottomHeadline,
-    bottomLabels
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.ComponentContainer, null, /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.Headline, null, topHeadline), /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.LabelsContainer, null, topLabels.map(label => /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.Label, {
-    key: label.value,
-    className: "icon-label"
-  }, /*#__PURE__*/_react.default.createElement(_ShoutIcon.default, {
-    fill: "#1B30AA"
-  }), /*#__PURE__*/_react.default.createElement("span", null, label.value)))), /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.Line, null), /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.Headline, null, bottomHeadline), /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.LabelsContainer, null, bottomLabels.map(label => /*#__PURE__*/_react.default.createElement(_CampaignDemoReport.Label, {
-    key: label.value
-  }, /*#__PURE__*/_react.default.createElement("span", null, label.value)))));
-};
-CampaignDemoReport.defaultProps = {
-  topHeadline: 'Live Campaigns This Week:',
-  topLabels: [{
-    icon: 'Label 1',
-    value: 'Monthly 2'
-  }, {
-    icon: 'Label 2',
-    value: 'Healthy Summer'
-  }, {
-    icon: 'Label 3',
-    value: 'Game Night'
-  }],
-  bottomHeadline: 'Upcoming Campaigns:',
-  bottomLabels: [{
-    icon: 'none',
-    value: 'Monthly 2'
-  }, {
-    icon: 'none',
-    value: 'Healthy Summer'
-  }]
-};
-var _default = exports.default = CampaignDemoReport;

package/dist/stories/components/CampaignDemoReport/CampaignDemoReport.stories.js

@@ -1,65 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Example = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _CampaignDemoReport = _interopRequireDefault(require("./CampaignDemoReport"));
-var _default = exports.default = {
-  title: 'Sag Campaign Tool/Campaign Demo Report',
-  component: _CampaignDemoReport.default,
-  tags: ['autodocs'],
-  argTypes: {
-    topHeadline: {
-      name: 'Top Headline',
-      control: {
-        type: 'text'
-      },
-      defaultValue: ''
-    },
-    topLabels: {
-      name: 'Top Labels',
-      control: {
-        type: 'array'
-      }
-    },
-    bottomHeadline: {
-      name: 'Bottom Headline',
-      control: {
-        type: 'text'
-      },
-      defaultValue: ''
-    },
-    bottomLabels: {
-      name: 'Bottom Labels',
-      control: {
-        type: 'array'
-      }
-    }
-  }
-};
-const Example = exports.Example = {
-  args: {
-    topHeadline: 'Live Campaigns This Week:',
-    topLabels: [{
-      icon: 'Label 1',
-      value: 'Monthly 2'
-    }, {
-      icon: 'Label 2',
-      value: 'Healthy Summer'
-    }, {
-      icon: 'Label 3',
-      value: 'Game Night'
-    }],
-    bottomHeadline: 'Upcoming Campaigns:',
-    bottomLabels: [{
-      icon: 'none',
-      value: 'Monthly 2'
-    }, {
-      icon: 'none',
-      value: 'Healthy Summer'
-    }]
-  }
-};

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

@@ -1,48 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Line = exports.LabelsContainer = exports.Label = exports.Headline = exports.ComponentContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const ComponentContainer = exports.ComponentContainer = _styledComponents.default.div`
-    padding: 20px;
-    font-family: "Poppins", sans-serif;
-    background-color: white;
-`;
-const Headline = exports.Headline = _styledComponents.default.h3`
-    color: #212121;
-    font-size: 20px;
-    font-weight: 500;
-    margin: 0 0 16px;
-`;
-const LabelsContainer = exports.LabelsContainer = _styledComponents.default.div`
-    display: flex;
-    gap: 16px;
-`;
-const Label = exports.Label = _styledComponents.default.div`
-  font-size: 12px;
-  padding: 8px;
-  color: #212121;
-  background-color: #F2F2F2;
-   > span {
-      font-weight: 400;
-    }
-
-    &.icon-label {
-        display: flex;
-        gap: 8px;
-        color: #1B30AA;
-        border-radius: 4px;
-        background-color: #F0F5FF;
-        > span {
-            font-weight: 500;
-        }
-    }
-`;
-const Line = exports.Line = _styledComponents.default.hr`
-    background-color: #D0D0D0;
-    width: 100%;
-    margin: 28px 0;
-`;

package/dist/stories/components/Card/Card.js

@@ -1,72 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Card = require("./Card.style");
-const Card = props => {
-  const {
-    data,
-    cardTitle,
-    buttonText,
-    onCardButtonClick,
-    width,
-    height
-  } = props;
-  const onCardButtonClickHandle = e => {
-    onCardButtonClick(e);
-  };
-  return /*#__PURE__*/_react.default.createElement(_Card.CardFrame, {
-    width: width,
-    height: height
-  }, /*#__PURE__*/_react.default.createElement(_Card.CardDetails, null, /*#__PURE__*/_react.default.createElement(_Card.CardTitle, null, cardTitle), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "Lorem ipsum"), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "Lorem ipsum minima "), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "commodi optio molesti"), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "optio molesti")), /*#__PURE__*/_react.default.createElement(_Card.SegmentsContainer, {
-    rows: data.lenght
-  }, data.map(segment =>
-  /*#__PURE__*/
-  // TODO: make icons
-  _react.default.createElement(_Card.Segment, null, segment.value, /*#__PURE__*/_react.default.createElement("br", null), segment.label))), /*#__PURE__*/_react.default.createElement(_Card.ButtonWrap, null, /*#__PURE__*/_react.default.createElement(_Card.Button, {
-    onClick: e => onCardButtonClickHandle(e)
-  }, buttonText)));
-};
-var _default = exports.default = Card;
-Card.defaultProps = {
-  data: [{
-    key: '1',
-    icon: 'cart',
-    label: 'Products',
-    value: 335
-  }, {
-    key: '2',
-    icon: 'gift',
-    label: 'Brands',
-    value: 161
-  }, {
-    key: '3',
-    icon: 'label',
-    label: 'Offers',
-    value: 223
-  }, {
-    key: '4',
-    icon: 'truck',
-    label: 'Suppliers',
-    value: 246
-  }, {
-    key: '5',
-    icon: '',
-    label: 'Total budget',
-    value: 45
-  }, {
-    key: '6',
-    icon: '',
-    label: 'Self-funded budget',
-    value: 146
-  }],
-  cardTitle: 'March 2024',
-  buttonText: 'Campaign Details',
-  onCardButtonClick: () => {},
-  width: '100%',
-  height: 'auto'
-};

package/dist/stories/components/Card/Card.stories.js

@@ -1,92 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SingleCard = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Card = _interopRequireDefault(require("./Card"));
-const data = [{
-  key: '1',
-  icon: 'cart',
-  label: 'Products',
-  value: 335
-}, {
-  key: '2',
-  icon: 'gift',
-  label: 'Brands',
-  value: 161
-}, {
-  key: '3',
-  icon: 'label',
-  label: 'Offers',
-  value: 223
-}, {
-  key: '4',
-  icon: 'truck',
-  label: 'Suppliers',
-  value: 246
-}, {
-  key: '5',
-  icon: '',
-  label: 'Total budget',
-  value: 45
-}, {
-  key: '6',
-  icon: '',
-  label: 'Self-funded budget',
-  value: 146
-}];
-var _default = exports.default = {
-  title: 'Sag Campaign Tool/Card',
-  component: _Card.default,
-  tags: ['autodocs'],
-  argTypes: {
-    cardTitle: {
-      name: 'cardTitle',
-      control: {
-        type: 'text'
-      },
-      description: 'Card title'
-    },
-    buttonText: {
-      name: 'buttonText',
-      control: {
-        type: 'text'
-      },
-      description: 'Button text'
-    },
-    width: {
-      name: 'Width',
-      control: {
-        type: 'text'
-      },
-      description: 'Table width'
-    },
-    height: {
-      name: 'Height',
-      control: {
-        type: 'text'
-      },
-      description: 'Table height'
-    },
-    onCardButtonClick: {
-      name: 'Button event',
-      action: 'onClick',
-      description: 'Click on a side big button'
-    }
-
-    // showPagination: {
-    //   name: 'Show Pagination',
-    //   control: { type: 'boolean' },
-    //   description: 'hide/show pagination',
-    //   defaultValue: true,
-    // },
-  }
-};
-const SingleCard = exports.SingleCard = {
-  args: {
-    data
-  }
-};

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

@@ -1,65 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SegmentsContainer = exports.Segment = exports.CardTitle = exports.CardFrame = exports.CardDetails = exports.CardDetailText = exports.ButtonWrap = exports.Button = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const CardFrame = exports.CardFrame = _styledComponents.default.div`
-    font-family: "Poppins", sans-serif;
-    background-color: white;
-    border: 1px solid gray;
-    border-left: 5px solid #6e9eed;
-    margin-bottom: 10px;
-    display: flex;
-    justify-content: space-between;
-    align-items: stretch;
-    width: ${props => props.width};
-    height: ${props => props.height};
-`;
-const CardDetails = exports.CardDetails = _styledComponents.default.div`
-    padding: 16px 20px;
-`;
-const CardTitle = exports.CardTitle = _styledComponents.default.h3`
-    font-size: 22px;
-    margin: 0;
-`;
-const CardDetailText = exports.CardDetailText = _styledComponents.default.span`
-    display: block;
-    font-size: 12px;
-`;
-const SegmentsContainer = exports.SegmentsContainer = _styledComponents.default.div`
-    display: grid;
-    flex-grow: 1;
-    gap: 20px;
-    flex-wrap: wrap;
-    padding: 16px;
-    grid-template-rows: repeat(2, 1fr);
-    grid-template-columns: repeat(3, 1fr);
-`;
-const Segment = exports.Segment = _styledComponents.default.div`
-    flex: 1 1 0px;
-    display: flex;
-    gap: 8px;
-    font-size: 12px;
-    border: 1px solid gray;
-    padding: 8px;
-`;
-const ButtonWrap = exports.ButtonWrap = _styledComponents.default.div`
-    display: flex;
-    align-items: center;
-    padding: 30px;
-    background-color: bisque;
-`;
-const Button = exports.Button = _styledComponents.default.button`
-    font-size: 20px;
-    color: white;
-    background-color: gray;
-    border: none;
-    padding: 8px 16px;
-    cursor: pointer;
-    &:hover, &:focus {
-        background-color: rebeccapurple;
-    }
-`;

package/dist/stories/components/CheckBox/CheckBox.js

@@ -1,76 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.CheckBox = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _CheckBoxCheckedIcon = require("../../icons/CheckBoxCheckedIcon");
-var _CheckBoxNotCheckedIcon = require("../../icons/CheckBoxNotCheckedIcon");
-var _CheckBox = require("./CheckBox.style");
-/* CheckBox */
-const CheckBox = _ref => {
-  let {
-    label,
-    checked = false,
-    disabled = false,
-    width = '100px',
-    height = '14px',
-    iconSize = '14px',
-    fontSize = '14px',
-    colorChecked = '#1B30AA',
-    colorUnchecked = '#212121',
-    colorDisabled = '#D0D0D0',
-    onClick,
-    ...props
-  } = _ref;
-  const [checkedState, setCheckedState] = (0, _react.useState)(checked);
-  (0, _react.useEffect)(() => {
-    setCheckedState(checked);
-  }, [checked]);
-  return /*#__PURE__*/_react.default.createElement(_CheckBox.ControlsContainer, {
-    id: "ControlsContainer",
-    fontSize: fontSize,
-    width: width,
-    height: height
-  }, /*#__PURE__*/_react.default.createElement(_CheckBox.Controls, {
-    id: "Controls"
-  }, checkedState ? /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBoxIconContainer, {
-    id: "CheckBoxIconContainer",
-    disabled: disabled,
-    onClick: () => {
-      if (!disabled) {
-        setCheckedState(false);
-        onClick({
-          label,
-          checked: false
-        });
-      }
-    }
-  }, ' ', /*#__PURE__*/_react.default.createElement(_CheckBoxCheckedIcon.CheckBoxCheckedIcon, {
-    width: iconSize,
-    height: iconSize,
-    color: disabled ? colorDisabled : colorChecked
-  })) : /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBoxIconContainer, {
-    id: "CheckBoxIconContainer",
-    disabled: disabled,
-    onClick: () => {
-      if (!disabled) {
-        onClick({
-          label,
-          checked: true
-        });
-        setCheckedState(true);
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement(_CheckBoxNotCheckedIcon.CheckBoxNotCheckedIcon, {
-    width: iconSize,
-    height: iconSize,
-    color: disabled ? colorDisabled : colorUnchecked
-  })), /*#__PURE__*/_react.default.createElement(_CheckBox.Label, {
-    id: "Label"
-  }, label)));
-};
-exports.CheckBox = CheckBox;
-var _default = exports.default = CheckBox;

package/dist/stories/components/CheckBox/CheckBox.stories.js

@@ -1,107 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SelectAll = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _CheckBox = require("./CheckBox");
-var _default = exports.default = {
-  title: 'SAG Core/CheckBox',
-  component: _CheckBox.CheckBox,
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      name: 'label',
-      control: {
-        type: 'text'
-      },
-      description: 'label of the object'
-    },
-    checked: {
-      name: 'checked',
-      control: {
-        type: 'boolean'
-      },
-      description: 'checked / not checked boolean'
-    },
-    disabled: {
-      name: 'disabled',
-      control: {
-        type: 'boolean'
-      },
-      description: 'disabled / enabled boolean'
-    },
-    colorChecked: {
-      name: 'colorChecked',
-      description: 'Sets checked Color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    colorUnchecked: {
-      name: 'colorUnchecked',
-      description: 'Sets unchecked Color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    colorDisabled: {
-      name: 'colorDisabled',
-      description: 'Sets Disabled Color',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    width: {
-      name: 'width',
-      control: {
-        type: 'text'
-      },
-      description: 'width of the component (in px)'
-    },
-    height: {
-      name: 'height',
-      control: {
-        type: 'text'
-      },
-      description: 'height of the component'
-    },
-    fontSize: {
-      name: 'fontSize',
-      control: {
-        type: 'text'
-      },
-      description: 'font size (in px)'
-    },
-    iconSize: {
-      name: 'iconSize',
-      control: {
-        type: 'text'
-      },
-      description: 'icon  size (in px)'
-    },
-    onClick: {
-      action: 'onClick',
-      description: 'onClick event - returns an objects of   eventAttributesData,  kpiData '
-    }
-  }
-};
-const SelectAll = exports.SelectAll = {
-  args: {
-    label: 'Select All',
-    checked: true,
-    disabled: false,
-    width: '100%',
-    height: '20px',
-    fontSize: '14px',
-    iconSize: '14px',
-    colorChecked: '#1B30AA',
-    colorUnchecked: '#212121',
-    colorDisabled: '#D0D0D0'
-  }
-};