@orangesk/orange-design-system 1.11.0 → 2.0.0-alpha.0

package/src/components/CartTable/CartTable.mdx

@@ -1,129 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../styleguide/';
-
-import CartTable from './';
-import data, {
-  discountVisible,
-  internetItems,
-  optionalItem,
-  deviceItem,
-  generateTotal,
-  largeItems,
-  router,
-} from './data';
-
-# CartTable
-
-## Example
-
-<Preview>
-  <CartTable items={data} />
-</Preview>
-
-## Usage
-
-### Editable
-
-Items in editable cart table are removable.
-
-<Preview>
-  <CartTable items={data} isEditable />
-</Preview>
-
-### Mandatory (non-removeable) items
-
-Some items should not have remove button because they are mandatory to complete the checkout.
-
-<Preview>
-  <CartTable items={internetItems} isEditable />
-</Preview>
-
-### Optional items
-
-Upsell good deals the customer gets with together with an existing cart item.
-
-<Preview>
-  <CartTable items={[...internetItems, optionalItem]} isEditable />
-</Preview>
-
-### Footer
-
-Label with/without tooltip can be added to single row footer.
-In case of footer with multiple rows with discounts, first row with upfront paynment can be hidden.
-
-<Preview>
-  <CartTable
-    items={data}
-    footer={{ name: 'Spolu', tooltip: 'Celková suma ktorú zaplatíte.' }}
-  />
-</Preview>
-
-### Monthly generated total
-
-Total is calculated automatically as sum of all items. In some cases, you might
-need to break down total prices into multiple rows by months. If you define
-`monthsFree` or `discount.monthsCount` in your data, cart table will use these
-to generate multiple rows with proper discounts calculated for different periods.
-
-<Preview>
-  <CartTable items={generateTotal} />
-</Preview>
-
-### Primary Discount
-
-When `price` is not defined and discount is, it takes place of price. Additionaly if `discount.monthsCount` is defined,
-description with duration of discount is displayed. And at last, when `price` and `discount` have the same value, free Label
-is shown.
-
-<Preview>
-  <CartTable items={discountVisible} />
-</Preview>
-
-### Hide first footer row
-
-If it's required we can hide first row of multiline footer.
-
-<Preview>
-  <CartTable items={discountVisible} footer={{ hideFirst: true }} />
-</Preview>
-
-### Simple pricing
-
-When the products sold do not require combined (upfront + monthly) payments, only relevant columns should be displayed.
-
-<Preview>
-  <CartTable
-    items={internetItems.map(({ price, ...other }) => ({
-      price: {
-        monthly: price.monthly,
-      },
-      ...other,
-    }))}
-  />
-</Preview>
-
-This default behaviour can be modified by removing of `.hide` class from hidden column.
-
-<Preview>
-  <CartTable
-    items={internetItems.map(({ price, ...other }) => ({
-      price: {
-        monthly: price.monthly,
-      },
-      ...other,
-    }))}
-    hideEmpty={false}
-  />
-</Preview>
-
-### Size
-
-Large cart table was designed for simple flat structure (no subitems), without icons/images, no edit buttons or optional items.
-
-<Preview>
-  <CartTable items={largeItems} size="large" />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<CartTable />" component={CartTable} />

package/src/components/CartTable/FooterNameColumn.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import { string, node } from 'prop-types';
-
-import InfoTooltip from '../Tooltip/InfoTooltip';
-
-const propTypes = {
-  name: string,
-  tooltip: node,
-};
-
-const FooterNameColumn = ({ name, tooltip }) => {
-  if (typeof name === 'undefined') {
-    return null;
-  }
-
-  return (
-    <>
-      <span className="bold">{name}</span>
-      {tooltip && (
-        <>
-          &nbsp;
-          <InfoTooltip className="icon--small">{tooltip}</InfoTooltip>
-        </>
-      )}
-    </>
-  );
-};
-
-FooterNameColumn.propTypes = propTypes;
-FooterNameColumn.displayName = 'FooterNameColumn';
-
-export default FooterNameColumn;

package/src/components/CartTable/FooterPriceColumn.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { number, string, oneOf } from 'prop-types';
-
-import { formatPrice } from '../../utils/helpers';
-
-const propTypes = {
-  discount: number,
-  label: string,
-  price: number,
-  size: oneOf(['large']),
-};
-
-const defaultProps = {
-  discount: 0,
-};
-
-const FooterPriceColumn = ({ price, discount, label, size }) => {
-  if (typeof price === 'undefined') {
-    return null;
-  }
-
-  return (
-    <>
-      {discount > 0 && <del className="color-gray">{formatPrice(price)}</del>}
-      <div>
-        <div
-          className={cx('color-orange mb-none', {
-            h4: size !== 'large',
-            h2: size === 'large',
-          })}
-        >
-          {formatPrice(price - discount)}
-        </div>
-        <span
-          className={cx('color-orange mb-none', {
-            h6: size !== 'large',
-            h3: size === 'large',
-          })}
-        >
-          {label}
-        </span>
-      </div>
-    </>
-  );
-};
-
-FooterPriceColumn.propTypes = propTypes;
-FooterPriceColumn.defaultProps = defaultProps;
-FooterPriceColumn.displayName = 'FooterPriceColumn';
-
-export default FooterPriceColumn;

package/src/components/CartTable/Price.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import { number, string } from 'prop-types';
-
-import Bar, { BarItem } from '../Bar';
-import { formatPrice } from '../../utils/helpers';
-
-const propTypes = {
-  discount: number,
-  discountMonthsCount: number,
-  freeLabel: string,
-  label: string,
-  price: number,
-};
-
-const Price = ({ price, discount, freeLabel, label, discountMonthsCount }) => {
-  const isDiscountPrimary = !price && discount;
-  return price !== undefined || discount !== undefined ? (
-    <>
-      {discount && price && (
-        <>
-          <del className="color-gray">{formatPrice(price)}</del>
-          <br />
-        </>
-      )}
-      <Bar className="bold justify-content-end mb-none">
-        <BarItem className={'hide-sm'}>
-          {discountMonthsCount && isDiscountPrimary
-            ? `1. – ${discountMonthsCount}. mesiac`
-            : label}
-        </BarItem>
-
-        <BarItem>
-          {isDiscountPrimary
-            ? formatPrice(-discount)
-            : price - discount === 0
-            ? freeLabel
-            : formatPrice(price - (discount === undefined ? 0 : discount))}
-        </BarItem>
-      </Bar>
-    </>
-  ) : null;
-};
-
-Price.propTypes = propTypes;
-
-export default Price;

package/src/components/CartTable/data.js

@@ -1,118 +0,0 @@
-export default [
-  {
-    type: 'Paušál',
-    name: 'Go Data 10',
-    icon: 'orange-cash',
-    price: {
-      monthly: 10,
-    },
-  },
-  {
-    type: 'Paušál',
-    name: 'Go 20',
-    icon: 'collective-class-training',
-    price: {
-      monthly: 20,
-    },
-  },
-  {
-    type: 'Zariadenie',
-    name: 'Motorola Moto G8 Plus blue',
-    image: '/images/device-mobile.png',
-    price: {
-      upfront: 10,
-    },
-    isSubitem: true,
-  },
-];
-
-const largeItems = [
-  {
-    type: 'Paušál',
-    name: 'Go Data 10',
-    price: {
-      monthly: 10,
-    },
-  },
-  {
-    type: 'Paušál',
-    name: 'Go 20',
-    price: {
-      monthly: 20,
-    },
-  },
-  {
-    type: 'Zariadenie',
-    name: 'Motorola Moto G8 Plus blue',
-    price: {
-      upfront: 10,
-      monthly: 15,
-    },
-  },
-];
-
-const optionalItem = {
-  type: '',
-  name: 'Vyberte si zariadenie s bonusom až 170 €',
-  icon: 'device-smart-phone',
-  isSubitem: true,
-  isOptional: true,
-};
-
-const deviceItem = {
-  type: 'Zariadenie',
-  name: 'Set top box',
-  isSubitem: true,
-  price: {
-    monthly: 2,
-  },
-  discount: {
-    monthly: 2,
-  },
-  tooltip:
-    'Set-top-box umožnuje sledovanie Orange Tv na vašom televízore. Pre každý televízor potrebujete samostatný Set-top box. So zapojením vám pomôže pri zriadení novej služby náš inštalačný technik.',
-};
-
-const discount = {
-  badge: 'Zľava',
-  name: 'Extra zľava na mesačný poplatok za internetovú službu',
-  icon: 'money-box',
-  discount: { monthly: 3.5, monthsCount: 20 },
-};
-
-const internet = {
-  type: 'Optický internet',
-  name: 'Home Optimal Fiber',
-  icon: 'device-laptop-computer-connected',
-  isMandatory: true,
-  price: {
-    upfront: 19.9,
-    monthly: 15,
-  },
-};
-
-const router = {
-  type: 'Zariadenie',
-  name: 'Optický konvertor',
-  tooltip:
-    'Optický konvertor a Wi-fi router je zariadenie 2v1 a pripojí váš domov do optickej siete Orange.',
-  price: {
-    upfront: 0,
-    monthly: 1,
-  },
-};
-
-const internetItems = [internet, router];
-
-export const discountVisible = [
-  internet,
-  { ...deviceItem, discount: { upfront: 5, monthly: 2 } },
-  discount,
-];
-
-export const generateTotal = [
-  { ...internet, discount: { monthly: 5, monthsCount: 10 }, monthsFree: 3 },
-  router,
-];
-
-export { optionalItem, deviceItem, internetItems, router, largeItems };

package/src/components/CartTable/generateFooter.js

@@ -1,71 +0,0 @@
-import React from 'react';
-
-import NameColumn from './FooterNameColumn';
-import PriceColumn from './FooterPriceColumn';
-import generateTotal from './generateTotal';
-
-/**
- *
- * Calculate final price with discounts by price type
- *
- * @param {array} items items to calculate from
- * @param {string} type type of price (monthly|upfront)
- */
-function calculateTotal(items, type) {
-  return items.reduce((total, item) => {
-    total += item?.price?.[type] ?? 0;
-    total -= item?.discount?.[type] ?? 0;
-    return total;
-  }, 0);
-}
-
-const generateFooter = (items, hide, footer, labels, size) => {
-  const hasLimitedDiscounts = items.find(
-    item => item?.monthsFree || item?.discount?.monthsCount
-  );
-  if (hasLimitedDiscounts) {
-    const total = generateTotal(items, footer?.hideFirst);
-    return total.map(({ name, tooltip, price, discount }) => ({
-      col1: <NameColumn name={name} tooltip={tooltip} />,
-      col2: price && price.upfront > 0 && hide !== 'upfront' && (
-        <PriceColumn
-          price={price.upfront}
-          discount={discount && discount.upfront}
-          label={labels['upfront']}
-          size={size}
-        />
-      ),
-      col3: (
-        <PriceColumn
-          price={price.monthly}
-          discount={discount && discount.monthly}
-          label={labels['monthly']}
-          size={size}
-        />
-      ),
-    }));
-  }
-  return [
-    {
-      col1: footer?.name && (
-        <NameColumn name={footer.name} tooltip={footer.tooltip} />
-      ),
-      col2: hide !== 'upfront' && (
-        <PriceColumn
-          price={calculateTotal(items, 'upfront')}
-          label={labels['upfront']}
-          size={size}
-        />
-      ),
-      col3: (
-        <PriceColumn
-          price={calculateTotal(items, 'monthly')}
-          label={labels['monthly']}
-          size={size}
-        />
-      ),
-    },
-  ];
-};
-
-export default generateFooter;

package/src/components/CartTable/generateRow.js

@@ -1,171 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-
-import Bar, { BarItem } from '../Bar';
-import Image from '../Image';
-import InfoTooltip from '../Tooltip/InfoTooltip';
-import ConditionalWrapper from '../../utils/ConditionalWrapper';
-import Icon from '../Icon';
-import { IconButton } from '../Button';
-import Badge from '../Badge';
-
-import Price from './Price';
-
-const generateRow = (row, isEditable, labels) => {
-  const {
-    isSubitem,
-    image,
-    badge,
-    type,
-    name,
-    tooltip,
-    price,
-    discount,
-    description,
-    icon,
-    isMandatory,
-    isOptional,
-  } = row;
-
-  return {
-    col1: (
-      <>
-        <Bar
-          canWrap={false}
-          className={cx('mb-none ', {
-            'cart-table__subitem': isSubitem,
-          })}
-        >
-          {isSubitem && (
-            <BarItem>
-              <Icon name="add" size="medium" />
-            </BarItem>
-          )}
-          {icon && (
-            <BarItem>
-              <Icon name={icon} size="medium" />
-            </BarItem>
-          )}
-          {image && (
-            <BarItem>
-              <Image src={image} alt="" width="24" />
-            </BarItem>
-          )}
-          <BarItem isFilling>
-            {badge && <Badge color="warning">{badge}</Badge>}
-            <span className="reset-font-size">{type}</span>
-            <Bar space="small">
-              <BarItem
-                canShrink
-                className={cx('bold', { 'text-nowrap': tooltip })}
-              >
-                <ConditionalWrapper
-                  condition={!!tooltip}
-                  wrapper={<span className={`text-wrap`}>{name}</span>}
-                >
-                  {name}
-                </ConditionalWrapper>
-                {tooltip && '\xa0'}
-                {tooltip && (
-                  <InfoTooltip className="icon--small" placement="right">
-                    {tooltip}
-                  </InfoTooltip>
-                )}
-              </BarItem>
-            </Bar>
-            {description && (
-              <div>
-                {typeof description === 'string'
-                  ? description
-                  : description.map(text => (
-                      <p key={text} className="mb-0">
-                        {text}
-                      </p>
-                    ))}
-              </div>
-            )}
-          </BarItem>
-          {isEditable && !isMandatory && !isOptional ? (
-            <BarItem className={'hide-sm'}>
-              <IconButton
-                iconName="trash"
-                isSquare
-                size="small"
-                aria-label={labels['remove']}
-              ></IconButton>
-            </BarItem>
-          ) : null}
-          {isOptional && (
-            <BarItem className={'hide-sm'}>
-              <IconButton
-                iconName="add"
-                isSquare
-                size="small"
-                aria-label={labels['add']}
-              ></IconButton>
-            </BarItem>
-          )}
-        </Bar>
-        {!price?.monthly && discount?.monthsCount && (
-          <div>
-            <p
-              className={cx(
-                'mb-none show-sm cart-table__discount--margin-top',
-                {
-                  'cart-table__subitem': isSubitem,
-                  'cart-table__discount--padding-left':
-                    image || icon || isSubitem,
-                }
-              )}
-            >
-              {`1. – ${discount.monthsCount}. mesiac`}
-            </p>
-          </div>
-        )}
-      </>
-    ),
-    col2: (
-      <Price
-        discount={discount?.['upfront']}
-        freeLabel={labels['free']}
-        label={labels['upfront']}
-        price={price?.['upfront']}
-      />
-    ),
-    col3: (
-      <Price
-        discount={discount?.['monthly']}
-        discountMonthsCount={discount?.['monthsCount']}
-        freeLabel={labels['free']}
-        label={labels['monthly']}
-        price={price?.['monthly']}
-      />
-    ),
-    ...(isEditable &&
-      !isMandatory &&
-      !isOptional && {
-        col4: (
-          <IconButton
-            iconName="trash"
-            size="small"
-            className="cart-table__button mb-none"
-          >
-            <span className="show-md">{labels['remove']}</span>
-          </IconButton>
-        ),
-      }),
-    ...(isOptional && {
-      col4: (
-        <IconButton
-          iconName="add"
-          size="small"
-          className="cart-table__button mb-none"
-        >
-          <span className="show-md">{labels['add']}</span>
-        </IconButton>
-      ),
-    }),
-  };
-};
-
-export default generateRow;