sag_components 1.0.27 → 1.0.29

package/src/stories/Button.stories.js

@@ -1,114 +0,0 @@
-import React from "react";
-import { Button } from "./components/Button";
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-export default {
-  title: "SAG/Button",
-  component: Button,
-  tags: ["autodocs"],
-
-  argTypes: {
-    text: {
-      name: "text",
-      control: { type: "text" },
-      description: "text inside of the button",
-      defaultValue: "",
-    },
-
-    shape: {
-      control: { type: "radio" },
-      options: ["contained", "outlined", "text"],
-      description: "shape of the button",
-    },
-
-    radius: {
-      name: "radius",
-      control: { type: "number" },
-      description: "radius of the button",
-      defaultValue: 50,
-    },
-
-    size: {
-      control: { type: "radio" },
-      options: ["small", "medium", "large"],
-      description: "size of the button",
-    },
-
-    disabled: {
-      name: "disabled",
-      control: { type: "boolean" },
-      description: "changes the button to be enabled/disabled",
-      defaultValue: "",
-    },
-
-    backgroundColor: {
-      control: {
-        type: "color",
-        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"],
-        description: "Sets Background Color",
-      },
-    },
-
-    textColor: {
-      control: { type: "select" },
-      options: [
-        "none",
-        "inherit",
-        "black",
-        "green",
-        "red",
-        "yellow",
-        "blue",
-        "white",        
-      ],
-      description: "text color of the button",
-    },
-
-    onClick: {
-      action: "onClick",
-      description: "returns an event click object when user clicks on a button",
-    },
-  },
-};
-
-const Template = (args) => <Button {...args} />;
-
-export const SmallContainedStyle = Template.bind({});
-SmallContainedStyle.args = {
-  text: "Confirm",
-  shape: "contained",
-  radius: 50,
-  size: "small",
-  textColor: "none",
-  disabled: false,
-};
-
-export const DisabledContainedStyle = Template.bind({});
-DisabledContainedStyle.args = {
-  size: "small",
-  text: "Confirm",
-  shape: "contained",
-  radius: 50,
-  textColor: "inherit",
-  disabled: true,
-};
-
-export const MediumOutlinedStyle = Template.bind({});
-MediumOutlinedStyle.args = {
-  text: "Confirm",
-  size: "medium",
-  radius: 50,
-  shape: "outlined",
-  textColor: "",
-  disabled: false,
-};
-
-export const LargeTextStyle = Template.bind({});
-LargeTextStyle.args = {
-  text: "Confirm",
-  size: "large",
-  radius: 50,
-  shape: "text",
-  textColor: "inherit",
-  disabled: false,
-};

package/src/stories/Button.style.js

@@ -1,9 +0,0 @@
-import styled from "styled-components";
-
-export const DropdownContainer = styled.div`
-  width: ${(props) => props.width};  
-  text-align: left;  
-  position: relative; 
-  align-items: center;
-  justify-content: center;
-`;

package/src/stories/Dropdown.stories.jsx

@@ -1,238 +0,0 @@
-import React from "react";
-import { Dropdown } from "./components/Dropdown";
-
-const options = [
-  { id: 0, label: "Shufersal" },
-  { id: 1, label: "EPC" },
-  { id: 2, label: "Food Lion" },
-  { id: 3, label: "Hannaford" },
-  { id: 4, label: "Giant Food" },
-  { id: 5, label: "The Giant Company" },
-  { id: 6, label: "Stop&Shop" },
-  { id: 7, label: "Price Chopper" },
-  { id: 8, label: "South Eastern Grocers" },
-];
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-export default {
-  title: "SAG/Dropdown",
-  component: Dropdown,
-  tags: ["autodocs"],
-
-  argTypes: {
-    width: {
-      control: { type: "number" },
-      description: "width of the input field",
-      defaultValue: 300,
-    },
-
-    size: {
-      control: { type: "radio" },
-      options: ["small", "large"],
-      description: "size: small/large",
-    },
-
-    text: {
-      name: "text",
-      control: { type: "text" },
-      description: "text inside of the input field",
-      defaultValue: 'Search...',
-    },
-
-    placeHolder: {
-      name: "placeHolder",
-      control: { type: "text" },
-      description: "notify the user how to type a text",
-      defaultValue: "Type...",
-    },
-
-    multiSelect: {
-      name: "multiSelect",
-      // control: { type: "boolean",                
-      //            },
-                 control: false,
-      description: "true/false - allows multi select - (switch multiSelect / singleSelect is disabled in this story)",      
-    },
-
-    
-    limitTagsOnMultiSelect: {
-      name: "limitTagsOnMultiSelect",
-      control: { type: "number" },
-      description: "limit noumber displayed tags on multi select when not focused",     
-    },
-
-    
-
-    options: {
-      description:
-        "array [] of objects: {id: string1 , label: string2 } to fill dropdown options ",
-    },
-
-    shape: {
-      control: { type: "radio" },
-      options: ["round", "square"],
-      description: "shape: round/square",
-    },
-
-    
-    showPopupIcon: {
-      name: "showPopupIcon",
-      control: { type: "boolean" },
-      description: "show/hide popup (up/down arrow) icon",
-    },
-
-    
-    showSearchIcon: {
-      name: "showSearchIcon",
-      control: { type: "boolean" },
-      description: "show/hide search icon ",
-    },
-
-    onChange: { 
-      action: "onChange", 
-      description: "returns an option (object) selected by the user", 
-    },
-
-    onInputChange: { 
-      action: "onInputChange",
-      description: "returns a value (string) displayed in the textbox",
-    },
-
-  },
-};
-
-const Template = (args) => <Dropdown {...args} />;
-
-
-export const SmallSquare = Template.bind({});
-SmallSquare.args = {
-  width: 300,
-  size: "small",
-  text: "Retailer",
-  multiSelect: false,
-  limitTagsOnMultiSelect: 0,
-  placeHolder: "Type...",
-  shape: "square",
-  showPopupIcon: false,
-  showSearchIcon: false,
-  options: options,
-};
-
-
-export const SmallRound = Template.bind({});
-SmallRound.args = {
-  width: 300,
-  size: "small",
-  text: "Retailer",
-  multiSelect: false,
-  limitTagsOnMultiSelect: 0,
-  placeHolder: "Type...",
-  shape: "round",
-  showPopupIcon: false,
-  showSearchIcon: false,
-  options: options,
-};
-
-
-
-export const UpDownArrowIcon = Template.bind({});
-UpDownArrowIcon.args = {
-  width: 300,
-  size: "small",
-  text: "Retailer",
-  multiSelect: false,
-  limitTagsOnMultiSelect: 0,
-  placeHolder: "Type...",
-  shape: "round",
-  showPopupIcon: true,
-  showSearchIcon: false,
-  options: options,
-};
-
-export const SearchIcon = Template.bind({});
-SearchIcon.args = {
-  width: 300,
-  size: "small",
-  text: "Retailer",
-  multiSelect: false,
-  limitTagsOnMultiSelect: 0,
-  placeHolder: "Type...",
-  shape: "round",
-  showPopupIcon: false,
-  showSearchIcon: true,
-  options: options,
-};
-
-
-export const MultiSelectSmall = Template.bind({});
-MultiSelectSmall.args = {
-  width: 400,
-  size: "small",
-  text: "Retailer",
-  multiSelect: true,
-  limitTagsOnMultiSelect: 2,
-  placeHolder: "Type...",
-  shape: "square",
-  showPopupIcon: false,
-  showSearchIcon: false,
-  options: options,
-};
-
-
-export const MultiSelectLarge = Template.bind({});
-MultiSelectLarge.args = {
-  width: 500,
-  size: "large",
-  text: "Retailer",
-  multiSelect: true,
-  limitTagsOnMultiSelect: 2,
-  placeHolder: "Type...",
-  shape: "round",
-  showPopupIcon: false,
-  showSearchIcon: false,
-  options: options,
-};
-
-
-export const MultiSelectWithIcons = Template.bind({});
-MultiSelectWithIcons.args = {
-  width: 500,
-  size: "large",
-  text: "Retailer",
-  multiSelect: true,
-  limitTagsOnMultiSelect: 2,
-  placeHolder: "Type...",
-  shape: "square",
-  showPopupIcon: true,
-  showSearchIcon: true,
-  options: options,
-};
-
-export const LargeRoundWithoutIcons = Template.bind({});
-LargeRoundWithoutIcons.args = {
-  width: 400,
-  size: "large",
-  text: "Retailer",
-  multiSelect: false,
-  limitTagsOnMultiSelect: 0,
-  placeHolder: "Type part of name...",
-  shape: "round",
-  showPopupIcon: false,
-  showSearchIcon: false,
-  options: options,
-};
-
-export const LargeSquareWithIcons = Template.bind({});
-LargeSquareWithIcons.args = {
-  width: 400,
-  size: "large",
-  text: "Retailer",
-  multiSelect: false,
-  limitTagsOnMultiSelect: 0,
-  placeHolder: "Type part of name...",
-  shape: "square",
-  showPopupIcon: true,
-  showSearchIcon: true,
-  options: options,
-};
-

package/src/stories/Dropdown.style.js

@@ -1,9 +0,0 @@
-import styled from "styled-components";
-
-export const DropdownContainer = styled.div`
-  width: ${(props) => props.width};  
-  text-align: left;  
-  position: relative; 
-  align-items: center;
-  justify-content: center;
-`;

package/src/stories/Introduction.mdx

@@ -1,119 +0,0 @@
-import { Meta } from '@storybook/blocks';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
-
-<Meta title="SAG/Introduction" />
-
-<style>
-  {`
-    .subheading {
-      --mediumdark: '#999999';
-      font-weight: 700;
-      font-size: 13px;
-      color: #999;
-      letter-spacing: 6px;
-      line-height: 24px;
-      text-transform: uppercase;
-      margin-bottom: 12px;
-      margin-top: 40px;
-    }
-
-    .link-list {
-      display: grid;
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr 1fr;
-      row-gap: 10px;
-    }
-
-    @media (min-width: 620px) {
-      .link-list {
-        row-gap: 20px;
-        column-gap: 20px;
-        grid-template-columns: 1fr 1fr;
-      }
-    }
-
-    @media all and (-ms-high-contrast:none) {
-    .link-list {
-        display: -ms-grid;
-        -ms-grid-columns: 1fr 1fr;
-        -ms-grid-rows: 1fr 1fr;
-      }
-    }
-
-    .link-item {
-      display: block;
-      padding: 20px;
-      border: 1px solid #00000010;
-      border-radius: 5px;
-      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-      color: #333333;
-      display: flex;
-      align-items: flex-start;
-    }
-
-    .link-item:hover {
-      border-color: #1EA7FD50;
-      transform: translate3d(0, -3px, 0);
-      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-    }
-
-    .link-item:active {
-      border-color: #1EA7FD;
-      transform: translate3d(0, 0, 0);
-    }
-
-    .link-item strong {
-      font-weight: 700;
-      display: block;
-      margin-bottom: 2px;
-    }
-
-    .link-item img {
-      height: 40px;
-      width: 40px;
-      margin-right: 15px;
-      flex: none;
-    }
-
-    .link-item span,
-    .link-item p {
-      margin: 0;
-      font-size: 14px;
-      line-height: 20px;
-    }
-
-    .tip {
-      display: inline-block;
-      border-radius: 1em;
-      font-size: 11px;
-      line-height: 12px;
-      font-weight: 700;
-      background: #E7FDD8;
-      color: #66BF3C;
-      padding: 4px 12px;
-      margin-right: 10px;
-      vertical-align: top;
-    }
-
-    .tip-wrapper {
-      font-size: 13px;
-      line-height: 20px;
-      margin-top: 40px;
-      margin-bottom: 40px;
-    }
-
-    .tip-wrapper code {
-      font-size: 12px;
-      display: inline-block;
-    }
-  `}
-</style>
-
-# Welcome to Sagramata Storybook

package/src/stories/OneColumnContainer.stories.js

@@ -1,20 +0,0 @@
-import { OneColumnContainer } from './components/OneColumnContainer';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-export default {
-  title: 'Sag BI/OneColumnContainer',
-  component: OneColumnContainer,
-  tags: ['autodocs'],
-
-};
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Primary = {
-  args: {
-    infoText:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
-    width:"250px",
-    height:"250px"
-  }
-};
-
-

package/src/stories/OneColumnContainer.style.js

@@ -1,41 +0,0 @@
-import styled from "styled-components";
-
-export const StyledContainer = styled.div`
-  width: ${(props) =>(props.width)};
-  height: ${(props) =>(props.height)};
-  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; 
-  display: flex;
-  position: relative;
-  border-radius: 10px;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-`;
-export const InfoTextContainer = styled.div`
-  width: ${(props) =>(props.width)};
-  height: ${(props) =>(props.height)};
-  align-items: center;
-  display: flex;
-  visibility: ${(props) =>(props.clicked ? 'visible' : 'hidden')};
-  text-align: center;
-  justify-content: center;
-  background: rgba(16, 16, 16, .6);
-`;
-
-export const InfoTextLabel = styled.div`
-  align-items: center;
-  text-align: center;
-  color: white;
-  margin: 10px;
-  justify-content: center;
-`;
-
-export const IconContainer = styled.div`
-  width: 15px;
-  height: 15px;
-  position: absolute;
-  margin-top:10px;
-  margin-right:10px;
-  top: 0;
-  right: 0;
-`;