@repobit/dex-system-design 0.5.0 → 0.7.0

package/src/components/divider/divider.stories.js

@@ -0,0 +1,77 @@
+import { html } from 'lit';
+import './divider-horizontal.js';
+import './divider-vertical.js';
+
+export default {
+  title: 'Atoms/Divider',
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      control: 'text',
+      if: { arg: 'component', eq: 'horizontal' },
+      description: 'Width of the horizontal divider (e.g. 100%, 200px)',
+    },
+    height: {
+      control: 'text',
+      if: { arg: 'component', eq: 'vertical' },
+      description: 'Height of the vertical divider (e.g. 100%, 40px)',
+    },
+    thickness: {
+      control: 'text',
+      if: { arg: 'component', eq: 'vertical' },
+      description: 'Thickness (visual width) of the vertical divider (e.g. 1px, 4px)',
+    },
+    component: {
+      control: { type: 'select' },
+      options: ['horizontal', 'vertical'],
+      description: 'Which divider to render',
+    },
+  },
+  args: {
+    component: 'horizontal',
+    width: '100%',
+    height: '100px',
+    thickness: '1px',
+  },
+};
+
+const Template = ({ component, width, height, thickness }) => {
+  return component === 'horizontal'
+    ? html`<bd-divider-horizontal .width=${width}></bd-divider-horizontal>`
+    : html`<bd-divider-vertical .height=${height} .thickness=${thickness}></bd-divider-vertical>`;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  component: 'horizontal',
+  width: '100%',
+  height: '100px',
+  thickness: '1px',
+};
+
+export const HorizontalCustomWidth = Template.bind({});
+HorizontalCustomWidth.args = {
+  component: 'horizontal',
+  width: '200px',
+};
+
+export const VerticalDefault = Template.bind({});
+VerticalDefault.args = {
+  component: 'vertical',
+  height: '100px',
+  thickness: '1px',
+};
+
+export const VerticalThick = Template.bind({});
+VerticalThick.args = {
+  component: 'vertical',
+  height: '100px',
+  thickness: '4px',
+};
+
+export const VerticalTall = Template.bind({});
+VerticalTall.args = {
+  component: 'vertical',
+  height: '200px',
+  thickness: '2px',
+};

package/src/components/header/header.css.js

@@ -0,0 +1,248 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    background: white;
+    --bd-accesibility-focus: var(--color-blue-500);
+    padding-top: 32px;
+    padding-bottom: 32px;
+  }
+
+  a:focus-visible {
+    outline: var(--size-2) solid var(--bd-accesibility-focus);
+    outline-offset: var(--size-2);
+    border-radius: var(--space-2xs);
+  }
+  a {
+    color: #000000;
+  }
+  .bd-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    gap: 30px;
+    padding: 0 240px;
+    margin: 0 auto;
+    align-items: stretch;
+  }
+
+  bd-button {
+    font-size: var(--heading-xxsmall) !important;
+    font-family: var(--font-family-sans) !important;
+    font-weight: var(--font-weight-sans-semibold) !important;
+  }
+  .bd-header-left,
+  .bd-header-right {
+    flex: 1;
+  }
+
+  .bd-header-right {
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+    width: 100%;
+    position: relative;
+  }
+
+  .bd-header-image {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+    display: block;
+    border-radius: var(--size-20);
+    position: relative;
+    z-index: 1;
+  }
+  .bd-product-name {
+    color: var(--color-blue-500);
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-sans-semibold);
+    font-size: var(--heading-large);
+    letter-spacing: var(--size-0);
+    margin-top: var(--size-16) !important;
+    margin-bottom: var(--size-8) !important;
+  }
+
+  .bd-value-prop {
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-sans-bold);
+    font-size: var(--heading-xlarge);
+    color: #000000;
+    letter-spacing: var(--size-0);
+    margin: var(--size-0) var(--size-0) !important;
+  }
+
+  .bd-description {
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-sans-regular);
+    font-size: var(--size-18);
+    color: #000000;
+    margin-top: var(--size-8) !important;
+    margin-bottom: var(--size-0) !important;
+  }
+
+  .bd-price-zone-top {
+    display: flex;
+    gap: var(--size-8);
+    align-items: center;
+    margin-top: var(--size-32);
+  }
+
+  .bd-full-price {
+    text-decoration: line-through;
+    color: #000000;
+    font-size: var(--size-18);
+    font-family: var(--font-family-sans);
+  }
+
+  .bd-discount {
+    background: #c3f4d4;
+    color: #0b6a26;
+    padding: var(--size-4) var(--size-14);
+    border-radius: var(--size-14);
+    font-size: var(--size-16);
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-sans-semibold);
+  }
+
+  .bd-price-zone-final {
+    display: block;
+    font-size: var(--display-large-mobile);
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-sans-bold);
+    margin-bottom: var(--size-16);
+  }
+
+  .bd-cta {
+    display: flex;
+    gap: var(--size-16);
+  }
+
+  .bd-disclaimer-top {
+    display: block;
+    margin-top: var(--size-16);
+    margin-bottom: var(--size-8);
+    font-size: var(--body-medium);
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-sans-regular);
+    color: #000000;
+  }
+  .bd-header-image-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    border-radius: 20px;
+  }
+
+  .bd-header-image {
+    display: block;
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+    transform: scale(1.35) translateY(-7%);
+  }
+
+  .bd-header-watermark {
+    position: absolute;
+    bottom: var(--size-16);
+    right: var(--size-16);
+    z-index: 2;
+    color: #ffffff;
+    font-size: var(--heading-large);
+    font-weight: 700;
+    opacity: 1;
+    -webkit-backdrop-filter: blur(2px);
+  }
+
+  .bd-header-watermark span {
+    color: #fff;
+    padding: var(--size-4) var(--size-8);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    border-radius: var(--size-4);
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-sans-bold);
+  }
+  .bd-disclaimer-bottom {
+    display: block;
+    font-size: var(--body-medium);
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-sans-regular);
+    color: #000000;
+    margin-bottom: var(--size-16);
+  }
+  ::slotted([slot="right"]) {
+    border-radius: var(--size-20);
+    overflow: hidden;
+    max-width: 100%;
+    height: auto;
+  }
+
+  ::slotted([slot="extra-content"]) {
+    margin-top: 1em;
+    display: block;
+  }
+
+  @media (max-width: 1024px) {
+    .bd-container {
+      flex-direction: column;
+      padding: 0 4em;
+      gap: 2em;
+    }
+
+    .bd-header-left,
+    .bd-header-right {
+      width: 100%;
+    }
+
+    .bd-cta {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    ::slotted([slot="right"]) {
+      max-width: 100%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .bd-container {
+      padding: 0 2em;
+      text-align: center;
+    }
+
+    .bd-product-name,
+    .bd-value-prop,
+    .bd-description,
+    .bd-price-zone-top,
+    .bd-price-zone-final,
+    .bd-disclaimer {
+      text-align: center;
+    }
+
+    .bd-cta {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .bd-header-right {
+      display: flex;
+      justify-content: center;
+    }
+
+    ::slotted([slot="right"]) {
+      max-width: 100%;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .bd-header-image {
+      max-width: 90%;
+      max-height: 200px;
+    }
+  }
+`;

package/src/components/header/header.js

@@ -0,0 +1,87 @@
+import { LitElement, html, css } from "lit";
+import headerCSS from "../header/header.css.js";
+
+class Header extends LitElement {
+  static properties = {
+    productName: { type: String, attribute: "product-name" },
+    valueProp: { type: String, attribute: "value-prop" },
+    description: { type: String },
+    fullPrice: { type: String, attribute: "full-price" },
+    discount: { type: String },
+    finalPrice: { type: String, attribute: "final-price" },
+  };
+
+  constructor() {
+    super();
+    this.productName = "";
+    this.valueProp = "";
+    this.description = "";
+    this.fullPrice = "";
+    this.discount = "";
+    this.finalPrice = "";
+  }
+
+  render() {
+    return html`
+      <div class="bd-container">
+        <div class="bd-header-left">
+          <h2 class="bd-product-name">${this.productName}</h2>
+          <h3 class="bd-value-prop">${this.valueProp}</h3>
+          <p class="bd-description">${this.description}</p>
+
+          <div class="bd-price-zone-top">
+            <span class="bd-full-price">${this.fullPrice}</span>
+            <span class="bd-discount">${this.discount}</span>
+          </div>
+
+          <span class="bd-price-zone-final">${this.finalPrice}</span>
+
+          <div class="bd-cta">
+            <bd-button
+              label="Buy now"
+              kind="danger"
+              size="md"
+              part="buy-button"
+              font-size="18px"
+              font-weight="600"
+              >Buy now</bd-button
+            >
+            <bd-button
+              label="View more plans"
+              kind="primary-outline"
+              size="md"
+              font-size="18px"
+              font-weight="600"
+            >
+              View more plans
+            </bd-button>
+          </div>
+
+          <small class="bd-disclaimer-top">
+            Protection for 1 account & 5 PCs, Macs, tablets, or smartphones.
+            Windows® | macOS® | Android™ | iOS®
+          </small>
+          <small class="bd-disclaimer-bottom">
+            First year price. Sales tax included. See
+            <a href="#" tabindex="0">Terms of Use</a> below.
+          </small>
+        </div>
+
+        <div class="bd-header-right">
+          <div class="bd-header-image-wrapper">
+            <img
+              class="bd-header-image"
+              src="images/bd-header-us.jpg"
+              alt="Security illustration"
+            />
+            <div class="bd-header-watermark"><span>Trusted. Always.</span></div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+Header.styles = [headerCSS];
+
+customElements.define("bd-header", Header);

package/src/components/header/header.stories.js

@@ -0,0 +1,57 @@
+import { html } from 'lit';
+import './header.js';
+
+export default {
+  title: 'Sections/Header', 
+  component: 'bd-header',
+  argTypes: {
+    productName: { control: 'text' },
+    valueProp: { control: 'text' },
+    description: { control: 'text' },
+    fullPrice: { control: 'text' },
+    discount: { control: 'text' },
+    finalPrice: { control: 'text' },
+  },
+};
+
+const Template = (args) => html`
+  <bd-header
+    .productName=${args.productName}
+    .valueProp=${args.valueProp}
+    .description=${args.description}
+    .fullPrice=${args.fullPrice}
+    .discount=${args.discount}
+    .finalPrice=${args.finalPrice}
+  >
+  </bd-header>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  productName: 'Bitdefender Ultimate Security',
+  valueProp: 'Complete Security, Advanced Privacy, and Identity Protection',
+  description: 'All in one plan to incorporate multi-awarded device protection, solid password management, unlimited VPN traffic & personalized protection for your online identity.',
+  fullPrice: '$139.99',
+  discount: 'Save 44%',
+  finalPrice: '$79.99*',
+};
+
+export const WithCustomImage = Template.bind({});
+WithCustomImage.args = {
+  productName: 'Bitdefender Ultimate Security',
+  valueProp: 'Complete Security, Advanced Privacy, and Identity Protection',
+  description: 'All in one plan to incorporate multi-awarded device protection, solid password management, unlimited VPN traffic & personalized protection for your online identity.',
+  fullPrice: '$139.99',
+  discount: 'Save 44%',
+  finalPrice: '$79.99*',
+};
+
+export const WithDiscountedPrice = Template.bind({});
+WithDiscountedPrice.args = {
+  productName: 'Bitdefender Premium Security',
+  valueProp: 'Advanced Security, Privacy & Identity Protection',
+  description: 'Comprehensive security for all your devices with enhanced features and privacy options.',
+  fullPrice: '$199.99',
+  discount: 'Save 35%',
+  finalPrice: '$129.99*',
+};

package/src/components/highlight/highlight-s.css.js

@@ -0,0 +1,88 @@
+import { css } from 'lit';
+
+export const highlightTextStyles = css`
+  :host {
+    --base-font-size: 32px;
+    --deco-height-multiplier: 1.4375; /* 46px / 32px */
+    --rect-height-multiplier: 1.1875; /* 38px / 32px */
+    --ellipse-size-multiplier: 0.25;  /* 8px / 32px */
+    
+    --deco-height: calc(var(--base-font-size) * var(--deco-height-multiplier));
+    --rect-height: calc(var(--base-font-size) * var(--rect-height-multiplier));
+    --ellipse-size: calc(var(--base-font-size) * var(--ellipse-size-multiplier));
+
+    display: inline-block;
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: 700;
+    font-size: var(--base-font-size);
+    line-height: 1.3;
+    color: #000;
+    text-align: center;
+  }
+
+  .highlight {
+    background: none;
+    color: #000;
+    display: inline-block;
+    font: inherit;
+    font-weight: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    position: relative;
+    vertical-align: middle;
+    top: -4px;
+  }
+
+  .highlight-bg {
+    background: #F1F7FE;
+    display: inline-block;
+    position: relative;
+    padding: 0 4px;
+    margin-left: 4px;
+    margin-right: 4px;
+    z-index: 1;
+  }
+
+  .highlight-deco {
+    position: absolute;
+    top: 0;
+    width: var(--ellipse-size);
+    height: var(--deco-height);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  .highlight-deco.left {
+    left: -3px;
+    top: -4px;
+  }
+
+  .highlight-deco.right {
+    right: -3px;
+  }
+
+  .highlight-svg-ellipse-top,
+  .highlight-svg-ellipse-bottom {
+    width: var(--ellipse-size);
+    height: var(--ellipse-size);
+    fill: #006DFF;
+    display: block;
+  }
+
+  .highlight-svg-rect {
+    width: calc(var(--ellipse-size) * 0.25); /* 2px when ellipse is 8px */
+    height: var(--rect-height);
+    fill: #006DFF;
+    display: block;
+  }
+
+  @media (max-width: 600px) {
+    :host {
+      --base-font-size: 20px;
+    }
+  }
+`;

package/src/components/highlight/highlight-s.js

@@ -0,0 +1,35 @@
+import { LitElement, html } from 'lit';
+import { highlightTextStyles } from './highlight-s.css.js';
+
+export class HighlightText extends LitElement {
+  static styles = highlightTextStyles;
+
+  render() {
+  return html`
+    <span class="highlight">
+      <span class="highlight-bg">
+        <span class="highlight-deco left">
+          <svg class="highlight-svg-ellipse-top" viewBox="0 0 8 8">
+            <ellipse cx="4" cy="4" rx="4" ry="4" />
+          </svg>
+          <svg class="highlight-svg-rect" viewBox="0 0 2 42">
+            <rect x="0" y="0" width="2" height="42" />
+          </svg>
+        </span>
+        <slot></slot>
+        <span class="highlight-deco right">
+          <svg class="highlight-svg-rect" viewBox="0 0 2 42">
+            <rect x="0" y="0" width="2" height="42" />
+          </svg>
+          <svg class="highlight-svg-ellipse-bottom" viewBox="0 0 8 8">
+            <ellipse cx="4" cy="4" rx="4" ry="4" />
+          </svg>
+        </span>
+      </span>
+    </span>
+  `;
+}
+
+}
+
+customElements.define('highlight-text-s', HighlightText);

package/src/components/highlight/highlight-s.stories.js

@@ -0,0 +1,22 @@
+import { html } from 'lit';
+import './highlight-s.js';
+
+export default {
+  title: 'Components/HighlightText',
+  component: 'highlight-text-s',
+};
+
+const Template = ({ beforeText, highlightText, afterText }) => html`
+  <h1>
+    ${beforeText}
+    <highlight-text-s>${highlightText}</highlight-text-s>
+    ${afterText}
+  </h1>
+`;
+
+export const InlineText = Template.bind({});
+InlineText.args = {
+  beforeText: 'Introducing ',
+  highlightText: 'the next generation',
+  afterText: ' of digital security: your personalized shield for a worry-free online experience.',
+};