sag_components 2.0.0-beta → 2.0.0-beta2

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

@@ -1,90 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Label = exports.InputCommit = exports.IconWrapper = exports.ButtonItem = exports.ButtonContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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-size: 14px;
-  font-weight: 400;
-  line-height: 0;
-  pointer-events: none;
-  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/components/Button/Button.test.js

@@ -1,94 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
-var _Button = _interopRequireDefault(require("./stories/components/Button"));
-require("@testing-library/jest-dom");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable import/no-unresolved */
-/* eslint-disable no-undef */
-
-test('Button Check text', () => {
-  (0, _react2.render)(<_Button.default text="test" type="primary" size="small" disabled={false} leftIcon="none" rightIcon="none" />);
-  const buttonElement = _react2.screen.getByText(/test/i);
-  expect(buttonElement).toBeInTheDocument();
-});
-test('Button Check type functionality: when "primary" type selected then background color must be specified as "rgb(146, 207, 23)" ', () => {
-  const {
-    container
-  } = (0, _react2.render)(<_Button.default text="Button" type="primary" size="small" disabled={false} leftIcon="none" rightIcon="none" />);
-  const buttonElement = container.querySelector('.ButtonItem');
-  expect(buttonElement).toBeInTheDocument();
-  const computedStyles = getComputedStyle(buttonElement);
-  expect(computedStyles.getPropertyValue('background-color')).toBe('rgb(146, 207, 23)');
-});
-test('Button Check type functionality: when "secondary" type selected then background color must be specified as  "rgb(232, 245, 235)" ', () => {
-  const {
-    container
-  } = (0, _react2.render)(<_Button.default text="Button" type="secondary" size="small" disabled={false} leftIcon="none" rightIcon="none" />);
-  const buttonElement = container.querySelector('.ButtonItem');
-  expect(buttonElement).toBeInTheDocument();
-  const computedStyles = getComputedStyle(buttonElement);
-  expect(computedStyles.getPropertyValue('background-color')).toBe('rgb(232, 245, 235)');
-});
-test('Button Check disabled functionality: when disabled prop is true, button textColor should be "rgb(177, 177, 177)" ', () => {
-  const {
-    container
-  } = (0, _react2.render)(<_Button.default text="Button" type="primary" size="small" disabled leftIcon="none" rightIcon="none" />);
-  const buttonElement = container.querySelector('.ButtonItem');
-  expect(buttonElement).toBeInTheDocument();
-  const computedStyles = getComputedStyle(buttonElement);
-  expect(computedStyles.getPropertyValue('color')).toBe('rgb(177, 177, 177)');
-});
-test('Button Check leftIcon functionality: when "Filter"  icons is specified as the leftIcon  props, it should be rendered on the screen', () => {
-  const {
-    container
-  } = (0, _react2.render)(<_Button.default text="Button" type="primary" size="small" disabled={false} leftIcon="Filter" rightIcon="Exit" />);
-  const elementFilter = container.querySelector('.FilterIcon');
-  expect(elementFilter).toBeInTheDocument();
-});
-test('Button Check rightIcon functionality: when "Exit" icons is specified as the rightIcon props, it should be rendered on the screen', () => {
-  const {
-    container
-  } = (0, _react2.render)(<_Button.default text="Button" type="primary" size="small" disabled={false} leftIcon="Filter" rightIcon="Exit" />);
-  const elementExit = container.querySelector('.ExitIcon');
-  expect(elementExit).toBeInTheDocument();
-});
-test('Button Check leftIcon and rightIcon functionality: when "Filter" and "Exit" icons is specified as the leftIcon and rightIcon props, it should be rendered on the screen', () => {
-  const {
-    container
-  } = (0, _react2.render)(<_Button.default text="Button" type="primary" size="small" disabled={false} leftIcon="Filter" rightIcon="Exit" />);
-  const elementFilter = container.querySelector('.FilterIcon');
-  expect(elementFilter).toBeInTheDocument();
-  const elementExit = container.querySelector('.ExitIcon');
-  expect(elementExit).toBeInTheDocument();
-});
-test('Button Check small/medium functionality: when "small" the height must be "33px" ', () => {
-  const {
-    container
-  } = (0, _react2.render)(<_Button.default text="Button" type="primary" size="small" disabled={false} leftIcon="none" rightIcon="none" />);
-  const elementButtonContainer = container.querySelector('.ButtonContainer');
-  expect(elementButtonContainer).toBeInTheDocument();
-  const computedStyle = getComputedStyle(elementButtonContainer);
-  expect(computedStyle.height).toBe('33px');
-});
-test('Button Check small/medium functionality: when "medium" the height must be "45px" ', () => {
-  const {
-    container
-  } = (0, _react2.render)(<_Button.default text="Button" type="primary" size="medium" disabled={false} />);
-  const elementButtonContainer = container.querySelector('.ButtonContainer');
-  expect(elementButtonContainer).toBeInTheDocument();
-  const computedStyle = getComputedStyle(elementButtonContainer);
-  expect(computedStyle.height).toBe('45px');
-});
-test('Button Check specific height and width functionality: when height = 100px and width = 200px it should override  small/medium functionality ', () => {
-  const {
-    container
-  } = (0, _react2.render)(<_Button.default text="Button" type="primary" size="small" disabled={false} height="100px" width="200px" />);
-  const elementButtonContainer = container.querySelector('.ButtonContainer');
-  expect(elementButtonContainer).toBeInTheDocument();
-  const computedStyle = getComputedStyle(elementButtonContainer);
-  expect(computedStyle.height).toBe('100px');
-  expect(computedStyle.width).toBe('200px');
-});

package/dist/components/CampaignTool/CampaignDemoReport.js

@@ -1,71 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _CampaignDemoReport = require("./CampaignDemoReport.style");
-var _ShoutIcon = _interopRequireDefault(require("../../icons/ShoutIcon"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const CampaignDemoReport = props => {
-  const {
-    topHeadline,
-    topLabels,
-    bottomHeadline,
-    bottomLabels
-  } = props;
-  return <_CampaignDemoReport.ComponentContainer>
-      <_CampaignDemoReport.Headline>{topHeadline}</_CampaignDemoReport.Headline>
-      <_CampaignDemoReport.LabelsContainer>
-        {topLabels.map(label => <_CampaignDemoReport.Label key={label.value} className="icon-label">
-            <_ShoutIcon.default fill="#1B30AA" />
-            <span>{label.value}</span>
-          </_CampaignDemoReport.Label>)}
-      </_CampaignDemoReport.LabelsContainer>
-
-      <_CampaignDemoReport.Line />
-
-      <_CampaignDemoReport.Headline>{bottomHeadline}</_CampaignDemoReport.Headline>
-      <_CampaignDemoReport.LabelsContainer>
-        {bottomLabels.map(label => <_CampaignDemoReport.Label key={label.value}>
-            <span>{label.value}</span>
-          </_CampaignDemoReport.Label>)}
-      </_CampaignDemoReport.LabelsContainer>
-    </_CampaignDemoReport.ComponentContainer>;
-};
-CampaignDemoReport.propTypes = {
-  topHeadline: _propTypes.default.string,
-  topLabels: _propTypes.default.arrayOf(_propTypes.default.shape({
-    value: _propTypes.default.string,
-    icon: _propTypes.default.string
-  })),
-  bottomHeadline: _propTypes.default.string,
-  bottomLabels: _propTypes.default.arrayOf(_propTypes.default.shape({
-    value: _propTypes.default.string,
-    icon: _propTypes.default.string
-  }))
-};
-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/components/CampaignTool/CampaignDemoReport.stories.js

@@ -1,65 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Example = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _CampaignDemoReport = _interopRequireDefault(require("./CampaignDemoReport"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Campaign Tool/CampaignDemoReport',
-  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 Template = args => <_CampaignDemoReport.default {...args} />;
-const Example = exports.Example = Template.bind({});
-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/components/CampaignTool/CampaignDemoReport.style.js

@@ -1,48 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Line = exports.LabelsContainer = exports.Label = exports.Headline = exports.ComponentContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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/components/CampaignTool/Card.js

@@ -1,100 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Card = require("./Card.style");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Card = props => {
-  const {
-    data,
-    cardTitle,
-    buttonText,
-    onCardButtonClick,
-    width,
-    height
-  } = props;
-  const onCardButtonClickHandle = e => {
-    onCardButtonClick(e);
-  };
-  return <_Card.CardFrame width={width} height={height}>
-      <_Card.CardDetails>
-        <_Card.CardTitle>{cardTitle}</_Card.CardTitle>
-        <_Card.CardDetailText>Lorem ipsum</_Card.CardDetailText>
-        <_Card.CardDetailText>Lorem ipsum minima </_Card.CardDetailText>
-        <_Card.CardDetailText>commodi optio molesti</_Card.CardDetailText>
-        <_Card.CardDetailText>optio molesti</_Card.CardDetailText>
-      </_Card.CardDetails>
-
-      <_Card.SegmentsContainer rows={data.lenght}>
-        {data.map(segment =>
-      // TODO: make icons
-      <_Card.Segment>
-            {segment.value}
-            <br />
-            {segment.label}
-          </_Card.Segment>)}
-      </_Card.SegmentsContainer>
-
-      <_Card.ButtonWrap>
-        <_Card.Button onClick={e => onCardButtonClickHandle(e)}>
-          {buttonText}
-        </_Card.Button>
-      </_Card.ButtonWrap>
-    </_Card.CardFrame>;
-};
-var _default = exports.default = Card;
-Card.propTypes = {
-  data: _propTypes.default.arrayOf(_propTypes.default.shape({
-    key: _propTypes.default.string,
-    icon: _propTypes.default.string,
-    label: _propTypes.default.string,
-    value: _propTypes.default.number
-  })),
-  cardTitle: _propTypes.default.string,
-  buttonText: _propTypes.default.string,
-  onCardButtonClick: _propTypes.default.func,
-  width: _propTypes.default.string,
-  height: _propTypes.default.string
-};
-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/components/CampaignTool/Card.stories.js

@@ -1,92 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SingleCard = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Card = _interopRequireDefault(require("../CampaignTool/Card"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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: '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 Template = args => <_Card.default {...args} />;
-const SingleCard = exports.SingleCard = Template.bind({});
-_Card.default.args = {
-  data
-};

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

@@ -1,65 +0,0 @@
-"use strict";
-
-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"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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/components/CampaignTool/FormInput.js

@@ -1,35 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FormInput = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactHookForm = require("react-hook-form");
-var _Input = _interopRequireDefault(require("../Input/Input"));
-var _PopupFieldsRules = require("./PopupFieldsRules");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const FormInput = ({
-  control,
-  name,
-  ...props
-}) => {
-  const {
-    field,
-    fieldState: {
-      invalid,
-      isTouched,
-      isDirty
-    },
-    formState: {
-      touchedFields,
-      dirtyFields
-    }
-  } = (0, _reactHookForm.useController)({
-    name,
-    control,
-    rules: (0, _PopupFieldsRules.getPopupFieldsRules)(name)
-  });
-  return <_Input.default {...props} onChange={field.onChange} value={field.value} name={field.name} inputRef={field.ref} />;
-};
-exports.FormInput = FormInput;