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

package/src/components/CartTable/generateRow.tsx

@@ -0,0 +1,196 @@
+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 { Tag } from "../Tag";
+
+import Price from "./Price";
+import type { Item } from "./generateTotal";
+
+export interface Labels {
+  [key: string]: string;
+  remove: string;
+  add: string;
+  free: string;
+  upfront: string;
+  monthly: string;
+}
+
+export interface Row extends Item {
+  description?: string | string[];
+}
+
+interface RowResult {
+  col1: React.ReactNode;
+  col2: React.ReactNode;
+  col3: React.ReactNode;
+  col4?: React.ReactNode;
+}
+
+const generateRow = (
+  row: Row,
+  isEditable: boolean,
+  labels: Labels,
+): RowResult => {
+  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 && <Tag color="warning">{badge}</Tag>}
+            {/* <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;

package/src/components/CartTable/generateTotal.ts

@@ -0,0 +1,157 @@
+// Type definitions
+export interface Price {
+  monthly?: number;
+  upfront?: number;
+}
+
+export interface Discount {
+  monthly?: number;
+  upfront?: number;
+  monthsCount?: number;
+}
+
+export interface Item {
+  type?: string;
+  name?: string;
+  icon?: string;
+  image?: string;
+  price?: Price;
+  isSubitem?: boolean;
+  isOptional?: boolean;
+  isMandatory?: boolean;
+  discount?: Discount;
+  monthsFree?: number;
+  tooltip?: string;
+  badge?: string;
+}
+
+export interface DiscountPeriod {
+  start: number;
+  end: number;
+  price: Price;
+  discount: Discount;
+}
+
+export interface FormattedPeriod {
+  name: string;
+  price: Price;
+  discount: Discount;
+}
+
+/**
+ *
+ * Calculate total payments for each month
+ * upfront price is shown just in the first row if its set
+ * monthly prices are shown with striked out discounts above the price
+ *
+ * @param items - cart items raw data
+ * @param commitment - commitment in months
+ *
+ */
+export default function generateTotal(
+  items: Item[],
+  hideFirst?: boolean,
+  commitment: number = 24,
+): FormattedPeriod[] {
+  let discountPeriods: DiscountPeriod[] = [];
+
+  // calculate full price without discounts
+  const monthlyPrice = calculateMonthlyPrice(items);
+  const upfrontPrice = calculateUpfrontPrice(items);
+
+  for (let month = 1; month < commitment; month++) {
+    const price: Price = {
+      // show upfront price only in first month
+      upfront: upfrontPrice > 0 && month === 1 ? upfrontPrice : undefined,
+      monthly: monthlyPrice,
+    };
+
+    // calculate discount for current month
+    const discount: Discount = {
+      monthly: calculateMonthlyDiscount(items, month, commitment),
+    };
+
+    // if discount is not the same as last item add new one
+    const lastIndex = discountPeriods.length - 1;
+    if (
+      discountPeriods.length === 0 ||
+      discountPeriods[lastIndex].price?.upfront !== price?.upfront ||
+      discountPeriods[lastIndex].discount?.monthly !== discount?.monthly
+    ) {
+      // set correct ending of last period
+      if (discountPeriods[lastIndex]) {
+        discountPeriods[lastIndex].end = month - 1;
+      }
+
+      discountPeriods = [
+        ...discountPeriods,
+        {
+          start: month,
+          end: commitment,
+          price,
+          discount,
+        },
+      ];
+    }
+  }
+  if (hideFirst) {
+    discountPeriods.shift();
+    if (discountPeriods[0]) discountPeriods[0].start = 1;
+  }
+  // return correct format for table
+  return format(discountPeriods);
+}
+
+function calculateMonthlyPrice(items: Item[]): number {
+  return items.reduce((price, item) => price + (item?.price?.monthly ?? 0), 0);
+}
+
+function calculateUpfrontPrice(items: Item[]): number {
+  return items.reduce((price, item) => {
+    price += item?.price?.upfront ?? 0;
+    price -= item?.discount?.upfront ?? 0;
+    return price;
+  }, 0);
+}
+
+function calculateMonthlyDiscount(
+  items: Item[],
+  currentMonth: number,
+  commitment: number,
+): number {
+  return items.reduce((discount, item) => {
+    const monthsFree = item?.monthsFree ?? 0;
+    const discountMonthsCount = item?.discount?.monthsCount ?? 0;
+    // special discounts starts after free months
+    const allDiscountsEnd = discountMonthsCount + monthsFree || commitment;
+
+    // if its free this month, add full price to discount
+    if (monthsFree && currentMonth <= monthsFree) {
+      discount += item?.price?.monthly ?? 0;
+    }
+    // add temporary or default monthly discount if aplicable
+    else if (allDiscountsEnd > 0 && currentMonth <= allDiscountsEnd) {
+      discount += item?.discount?.monthly ?? 0;
+    }
+    return discount;
+  }, 0);
+}
+
+function format(items: DiscountPeriod[]): FormattedPeriod[] {
+  return items.map(({ start, end, price, discount }) => {
+    let name = "";
+    if (items.length > 1) {
+      if (start !== end) {
+        name = `${start}. – ${end}. mesiac`;
+      } else {
+        name = `${start}. mesiac`;
+      }
+    }
+
+    return {
+      name,
+      price,
+      discount,
+    };
+  });
+}

package/src/components/CartTable/index.ts

@@ -0,0 +1,3 @@
+import "./styles/style.scss";
+
+export { CartTable } from "./CartTable";

package/src/components/CartTable/styles/config.scss

@@ -0,0 +1,19 @@
+@use '../../../styles/tokens/space';
+@use '../../../styles/tools/convert';
+@use '../../../styles/tokens/color';
+
+$button-margin: space.get('xsmall');
+$default-spacing: space.get('medium');
+$mobile-spacing: space.get('small');
+$subitem-discount-spacing: convert.to-rem(44px);
+
+$button-font-size: convert.to-rem(14px);
+$large-font-size--mobile: convert.to-rem(20px);
+$large-font-size--desktop: convert.to-rem(24px);
+$default-font-size: convert.to-rem(16px);
+
+//stylelint-disable-next-line
+$product-size: calc(100% - convert.to-rem(58px));
+
+$table-header-border: 2px solid color.$gray-500;
+$table-last-border: 2px solid color.$black;

package/src/components/CartTable/styles/mixins.scss

@@ -0,0 +1,141 @@
+@use '../../../styles/tokens/breakpoint';
+@use './config';
+
+@mixin base {
+    height: 100%;
+
+    thead tr {
+      border-bottom: config.$table-header-border;
+
+      th {
+        border-bottom: 0;
+      }
+    }
+
+  @include breakpoint.get('xs', 'down') {
+
+    tr {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: -2px;
+    }
+
+    td:empty {
+      display: none;
+    }
+
+    tfoot tr {
+      justify-content: flex-end;
+      align-items: center;
+      flex-wrap: nowrap;
+    }
+  }
+
+  @include breakpoint.get('md') {
+    td,
+    th {
+      padding-right: config.$default-spacing !important;
+    }
+
+    // stylelint-disable selector-max-compound-selectors
+    > tbody > tr > td:first-child,
+    > tbody > tr > th:first-child,
+    > tfoot > tr > td:first-child,
+    > tfoot > tr > th:first-child,
+    > thead > tr > td:first-child,
+    > thead > tr > th:first-child {
+      padding-left: config.$default-spacing;
+    }
+  }
+
+  tbody > tr:last-child {
+    border-bottom: config.$table-last-border;
+  }
+
+  td:empty,
+  th:empty {
+    padding: 0 !important;
+  }  
+}
+
+@mixin product {
+  @include breakpoint.get('xs', 'down') {
+    flex-basis: config.$product-size;
+    flex-grow: 1;
+
+    .bar > .bar__item:not(:last-child) {
+      margin-right: config.$mobile-spacing;
+    }
+
+    tfoot & {
+      flex-basis: auto;
+      max-width: none;
+    }
+  } 
+}
+
+@mixin discount-position--top {
+    margin-top: config.$default-spacing;
+}
+
+@mixin discount-position--left {
+    padding-left: config.$subitem-discount-spacing;
+}
+
+@mixin subitem-position {
+    margin-left: config.$mobile-spacing;
+    @include breakpoint.get('md') {
+      margin-left: config.$default-spacing;
+    } 
+}
+
+@mixin button {
+    font-size: config.$button-font-size !important;
+
+    svg {
+      margin-right: -#{config.$button-margin};
+      margin-left: -#{config.$button-margin};
+    }
+    
+    @include breakpoint.get('md') { 
+      svg {
+        margin-right: config.$button-margin !important;
+      }
+    }
+}
+
+@mixin price {
+    @include breakpoint.get('xs', 'down'){
+      padding-top: 0 !important;
+      order: 1;
+      flex-basis: 100%;
+
+      thead & {
+        display: none;
+        border-bottom: 0;
+      }
+
+      tfoot & {
+        flex-basis: auto;
+        padding-top: config.$default-spacing !important;
+        padding-bottom: config.$default-spacing !important;
+      }
+    }
+}
+
+@mixin large {
+  th,
+  td {
+    
+    @include breakpoint.get('md') {
+      padding: config.$default-spacing !important;
+
+    }
+  }
+
+  font-size: config.$large-font-size--mobile;
+
+  @include breakpoint.get('md') {
+    font-size: config.$large-font-size--desktop;
+  }
+}

package/src/components/CartTable/styles/style.scss

@@ -0,0 +1,37 @@
+@use "./mixins";
+
+@layer components {
+  .cart-table {
+    @include mixins.base;
+
+    &__subitem {
+      @include mixins.subitem-position;
+    }
+
+    &__discount {
+      &--margin-top {
+        @include mixins.discount-position--top;
+      }
+
+      &--padding-left {
+        @include mixins.discount-position--left;
+      }
+    }
+
+    &__button {
+      @include mixins.button;
+    }
+
+    &__price {
+      @include mixins.price;
+    }
+
+    &--large {
+      @include mixins.large;
+    }
+
+    &__product {
+      @include mixins.product;
+    }
+  }
+}

package/src/components/CartTable/tests/CartTable.conformance.test.js

@@ -0,0 +1,16 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { CartTable } from "../";
+
+const example = <CartTable />;
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate();
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

package/src/components/Container/Container.mdx

@@ -0,0 +1,73 @@
+import { ComponentDocs, Code } from '@lighting-beetle/lighter-styleguide';
+
+import { Preview } from '../../styleguide/';
+import Container from './';
+
+# Container
+
+Container is a base layout component that keeps page content offset from viewport edges and applies max width on larger viewports.
+
+## Basic Usage
+
+<Preview>
+  <Container>
+    <p>I'm in a container. I will never touch the edges of the viewport.</p>
+  </Container>
+</Preview>
+
+## Responsive Behavior
+
+Container automatically adapts to different screen sizes:
+
+- **XS/SM**: Fluid width (100% - padding)
+- **MD (768px+)**: Maximum width 744px
+- **LG (992px+)**: Maximum width 960px  
+- **XL (1240px+)**: Maximum width 1200px
+- **XXL (1380px+)**: Maximum width 1320px
+
+<Preview>
+  <div style={{ border: '1px solid #ccc', padding: '1rem', marginBottom: '1rem' }}>
+    <h4>XS/SM screen (fluid)</h4>
+    <Container style={{ backgroundColor: '#f0f0f0', padding: '1rem' }}>
+      <p>Fluid width - adapts to screen width</p>
+    </Container>
+  </div>
+  
+  <div style={{ border: '1px solid #ccc', padding: '1rem', marginBottom: '1rem' }}>
+    <h4>MD+ screen (max-width)</h4>
+    <Container style={{ backgroundColor: '#e0f0ff', padding: '1rem' }}>
+      <p>Maximum width with centering</p>
+    </Container>
+  </div>
+</Preview>
+
+## With Content
+
+Container can contain any content - text, images, forms, or other components:
+
+<Preview>
+  <Container>
+    <h2>Page Title</h2>
+    <p>This is the main page content. Container ensures that content is properly aligned and won't touch the screen edges.</p>
+    
+    <div style={{ backgroundColor: '#f5f5f5', padding: '1rem', borderRadius: '4px' }}>
+      <h3>Subsection</h3>
+      <p>Even nested elements are properly aligned within the container.</p>
+    </div>
+  </Container>
+</Preview>
+
+## With Custom Classes
+
+Container supports adding custom CSS classes via the `className` prop:
+
+<Preview>
+  <Container className="bg-orange color-white" style={{ padding: '2rem' }}>
+    <h3>Container with custom styles</h3>
+    <p>This container has custom CSS classes applied for background and text color.</p>
+  </Container>
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Container />" component={Container} />

package/src/components/Container/Container.tsx

@@ -0,0 +1,17 @@
+import React, { forwardRef } from "react";
+import cx from "classnames";
+
+const CLASS_ROOT = "container";
+
+const Container = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...other }, ref) => {
+  const classes = cx(CLASS_ROOT, className);
+
+  return <div className={classes} ref={ref} {...other} />;
+});
+
+Container.displayName = "Container";
+
+export { Container };

package/src/components/Container/index.ts

@@ -0,0 +1,3 @@
+import "./styles/style.scss";
+
+export { Container } from "./Container";

package/src/components/Container/styles/config.scss

@@ -0,0 +1,11 @@
+@use '../../../styles/tokens/space';
+
+$container-widths: (
+  // containers on xs and md breakpoints are fluid
+  md: 744px,
+  lg: 960px,
+  xl: 1200px,
+  xxl: 1320px
+);
+
+$container-padding: space.get('small');

package/src/components/Container/styles/mixins.scss

@@ -0,0 +1,22 @@
+@use './../../../styles/tools/generate';
+@use './../../../styles/tokens/breakpoint';
+@use './config';
+
+@mixin base {
+  width: 100%;
+  max-width: none;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: config.$container-padding;
+  padding-right: config.$container-padding;
+
+  @each $breakpoint, $width in config.$container-widths {
+    @include breakpoint.get($breakpoint) {
+      max-width: $width;
+    }
+  }
+
+  > *:last-child{
+    margin-bottom: 0;
+  }
+}