@repobit/dex-system-design 0.16.0 → 0.18.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.18.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.17.0...@repobit/dex-system-design@0.18.0) (2025-09-11)
+
+
+### Features
+
+* **DEX-1001:** update header.stories.js + fix for input issue on build ([44cb5df](https://github.com/bitdefender/dex-core/commit/44cb5dfc74c45d3c6835d47a09694006517864b3))
+
+
+### Bug Fixes
+
+* **DEX-1001:** rename Input file -> input ([c05257c](https://github.com/bitdefender/dex-core/commit/c05257c690eeef94ee035a69feef8e393cffe5ea))
+* **DEX-1001:** rename Input folder -> input ([940877d](https://github.com/bitdefender/dex-core/commit/940877dceabc897918a56dfa37f4e7107397229b))
+
+
+
+## [0.17.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.16.0...@repobit/dex-system-design@0.17.0) (2025-09-11)
+
+
+### Features
+
+* **DEX-1001:** delete demo.stories.js due to issues on build ([17470b5](https://github.com/bitdefender/dex-core/commit/17470b571f82e5955f787a3e59d4fc2452e76481))
+
+
+
 ## [0.16.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.15.0...@repobit/dex-system-design@0.16.0) (2025-09-11)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -25,7 +25,7 @@
     "./faq": "./src/components/FAQ/faq.js",
     "./header": "./src/components/header/header.js",
     "./highlight": "./src/components/highlight/highlight.js",
-    "./input": "./src/components/Input/Input.js",
+    "./input": "./src/components/input/input.js",
     "./light-carousel": "./src/components/light-carousel/light-carousel.js",
     "./paragraph": "./src/components/paragraph/paragraph.js",
     "./pricing-cards": "./src/components/pricing-cards/pricing-card.js",
@@ -68,5 +68,5 @@
   "volta": {
     "node": "22.14.0"
   },
-  "gitHead": "c737f20e05cd527a20c8cf52d111f718158edba9"
+  "gitHead": "c1703cc9842c8865680663be250e49206986f44e"
 }

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

@@ -2,16 +2,21 @@ import { html } from 'lit';
 import './header.js';
 
 export default {
-  title: 'Sections/Header', 
+  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' },
-  },
+  argTypes : {
+    productName          : { control: 'text' },
+    valueProp            : { control: 'text' },
+    description          : { control: 'text' },
+    fullPrice            : { control: 'text' },
+    discount             : { control: 'text' },
+    finalPrice           : { control: 'text' },
+    headerImage          : { control: 'text' },
+    disclaimerTop        : { control: 'text' },
+    disclaimerBottomStart: { control: 'text' },
+    disclaimerBottomLink : { control: 'text' },
+    disclaimerBottomEnd  : { control: 'text' }
+  }
 };
 
 const Template = (args) => html`
@@ -23,35 +28,56 @@ const Template = (args) => html`
     .discount=${args.discount}
     .finalPrice=${args.finalPrice}
   >
+    ${args.headerImage
+      ? html`<img slot="header-image" src="${args.headerImage}" alt="Header Image">`
+      : ''}
+
+    ${args.disclaimerTop
+      ? html`<span slot="disclaimer-top">${args.disclaimerTop}</span>`
+      : ''}
+
+    ${args.disclaimerBottomStart || args.disclaimerBottomLink || args.disclaimerBottomEnd
+      ? html`
+          <span slot="disclaimer-bottom-text-start">${args.disclaimerBottomStart || ''}</span>
+          <a slot="disclaimer-bottom-link" href="#">${args.disclaimerBottomLink || ''}</a>
+          <span slot="disclaimer-bottom-text-end">${args.disclaimerBottomEnd || ''}</span>
+        `
+      : ''}
   </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*',
+  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*',
+  headerImage          : '/assets/bd-header-us.jpg',
+  disclaimerTop        : 'Protection for 1 account & 5 PCs, Macs, tablets, or smartphones. Windows® | macOS® | Android™ | iOS®',
+  disclaimerBottomStart: 'Learn more about',
+  disclaimerBottomLink : 'Terms & Conditions',
+  disclaimerBottomEnd  : 'before purchasing.'
 };
 
 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*',
+  ...Default.args,
+  headerImage: '/assets/bd-header-us.jpg'
 };
 
 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*',
+  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*',
+  headerImage          : '/assets/bd-header-us.jpg',
+  disclaimerTop        : 'Protection for 1 account & 5 devices.',
+  disclaimerBottomStart: 'See',
+  disclaimerBottomLink : 'Details',
+  disclaimerBottomEnd  : 'for more info.'
 };

package/src/components/{Input → input}/custom-form.stories.js

@@ -2,7 +2,7 @@ import { html } from 'lit';
 
 import '../dropdown/dropdown.js';
 import './input-clipboard.js';
-import './Input.js';
+import './input.js';
 
 
 export default {

package/src/stories/demo.stories.js

@@ -1,270 +0,0 @@
-// // src/stories/DesignSystem.stories.js
-// import '/src/components/Anchor/anchor-nav.js';
-// import '/src/components/badge/badge.js';
-// import '/src/components/Button/Button.js';
-// import '/src/components/carousel/carousel.js';
-// import '/src/components/checkbox/checkbox.js';
-// import '/src/components/divider/divider-horizontal.js';
-// import '/src/components/divider/divider-vertical.js';
-// import '/src/components/FAQ/faq.js';
-// import '/src/components/header/header.js';
-// import '/src/components/highlight/highlight-s.js';
-// import '/src/components/highlight/highlight.js';
-// import '/src/components/input/input.js';
-// import '/src/components/light-carousel/light-carousel.js';
-// import '/src/components/paragraph/paragraph.js';
-// import '/src/components/pricing-cards/pricing-card.js';
-// import '/src/components/radio/radio.js';
-// import '/src/components/tabs/tabs.js';
-// import '/src/components/termsOfUse/terms.js';
-
-// export default {
-//   title     : 'Design System/Demo full page',
-//   parameters: {
-//   },
-//   decorators: [
-//     (Story) => {
-//       return `
-//         <link rel="stylesheet" href="/src/tokens/tokens.css" />
-//         <link rel="stylesheet" href="/src/tokens/layout.css" />
-//         <link rel="stylesheet" href="/src/tokens/typography.css" />
-//         <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&display=swap" rel="stylesheet" />
-//         ${Story()}
-//       `;
-//     }
-//   ]
-// };
-
-// export const FullPage = () => `
-//   <bd-header
-//     product-name="Bitdefender Ultimate Security"
-//     value-prop="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."
-//     full-price="$139.99"
-//     discount="Save 44%"
-//     final-price="$79.99"
-//   >
-//     <div class="bd-header-right">
-//       <img
-//         class="bd-header-image"
-//         src="images/bd-header-us.jpg"
-//         alt="Security illustration"
-//       />
-//     </div>
-//   </bd-header>
-
-//   <bd-anchor-nav>
-//     <bd-anchor-nav-item title="Anchor 1" id="anchor-1"></bd-anchor-nav-item>
-//     <bd-anchor-nav-item title="Anchor 2" id="anchor-2"></bd-anchor-nav-item>
-//     <bd-anchor-nav-item title="Anchor 3" id="anchor-3"></bd-anchor-nav-item>
-//   </bd-anchor-nav>
-
-//   <p>Let’s Secure Your Digital Life</p>
-
-//   <bd-highlight-text-s highlight-text="next generation of digital security">
-//     Introducing the next generation of digital security: your personalized shield for a worry-free online experience.
-//   </bd-highlight-text-s>
-
-//   <bd-light-carousel-section
-//     title="Our AI-powered platform that detects and fights scams. In real time."
-//   >
-//     <bd-light-carousel-item
-//       title="Scam Copilot Chatbot"
-//       icon="src/assets/icons/light-carousel-img1.png"
-//       badge="NEW"
-//     >
-//       <p>
-//         Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim.
-//       </p>
-//     </bd-light-carousel-item>
-
-//     <bd-light-carousel-item
-//       title="Scam Wave Alerts"
-//       icon="src/assets/icons/light-carousel-img1.png"
-//       badge="NEW"
-//     >
-//       <p>
-//         Stay informed with real-time alerts about ongoing scam outbreaks detected in your area automatically.
-//       </p>
-//     </bd-light-carousel-item>
-
-//     <bd-light-carousel-item
-//       title="Online Scam Protection"
-//       icon="src/assets/icons/light-carousel-img1.png"
-//       badge="NEW"
-//     >
-//       <p>Focused on browsing activities, it specializes in detecting the newest scam patterns and tactics.</p>
-//     </bd-light-carousel-item>
-
-//     <bd-light-carousel-item
-//       title="Remote Access Protection"
-//       icon="src/assets/icons/light-carousel-img1.png"
-//       badge="NEW"
-//     >
-//       <p>Detects patterns of behavior typical of scammers seeking to access your data remotely.</p>
-//     </bd-light-carousel-item>
-
-//     <bd-light-carousel-item
-//       title="SMS Protection"
-//       icon="src/assets/icons/light-carousel-img1.png"
-//       badge="IMPROVED"
-//     >
-//       <p>Detects scams and harmful links in SMS messages3 using advanced AI for fast, real-time protection.</p>
-//     </bd-light-carousel-item>
-
-//     <bd-light-carousel-item
-//       title="Email Protection"
-//       icon="src/assets/icons/light-carousel-img1.png"
-//     >
-//       <p>Detects scams and harmful links in SMS messages3 using advanced AI for fast, real-time protection.</p>
-//     </bd-light-carousel-item>
-
-//     <bd-light-carousel-item
-//       title="Scam Notification Protection"
-//       icon="src/assets/icons/light-carousel-img1.png"
-//     >
-//       <p>Scans and detects scam attempts directly in push notifications4 before you even tap or interact.</p>
-//     </bd-light-carousel-item>
-
-//     <bd-light-carousel-item
-//       title="Chat Protection"
-//       icon="src/assets/icons/light-carousel-img1.png"
-//     >
-//       <p>Identifies scam messages in WhatsApp, Messenger, Telegram and Discord chats4 before they reach your attention.</p>
-//     </bd-light-carousel-item>
-
-//     <bd-light-carousel-item
-//       title="Calendar Invites Protection"
-//       icon="src/assets/icons/light-carousel-img1.png"
-//     >
-//       <p>Finds and blocks scam calendar events5 before they can trick you with fake links or misleading invites.</p>
-//     </bd-light-carousel-item>
-//   </bd-light-carousel-section>
-
-//   <div class="tabs">
-//     <bd-tabs-component id="anchor-2-section"></bd-tabs-component>
-//   </div>
-
-//   <bd-faq-section title="Questions? Answers." id="anchor-1-section">
-//     <bd-faq-section-item title="How does Bitdefender Internet Security protect me?">
-//       <p>Bitdefender Internet Security provides the best protection...</p>
-//       <p>Bitdefender Internet Security provides the best protection...</p>
-//       <p>Bitdefender Internet Security provides the best protection...</p>
-//     </bd-faq-section-item>
-
-//     <bd-faq-section-item title="Does Bitdefender protect me against ransomware?">
-//       <p>Yes! Bitdefender Internet Security offers unbeatable ransomware protection...</p>
-//     </bd-faq-section-item>
-
-//     <bd-faq-section-item title="Do I get a VPN with Bitdefender Internet Security?">
-//       <p>Bitdefender Internet Security includes a basic VPN with 200MB per day.</p>
-//     </bd-faq-section-item>
-//   </bd-faq-section>
-
-//   <div class="bd-answer">
-//     <bd-terms-section></bd-terms-section>
-//   </div>
-
-//   <bd-carousel-section
-//     title="Need help? We've got answers!"
-//     id="anchor-3-section"
-//   >
-//     <bd-carousel-item
-//       title="Scam Copilot Bot"
-//       subTitle="Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim"
-//       modalText="Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim"
-//       icon="src/assets/icons/light-carousel-img1.png"
-//     >
-//       <h3>Scam Copilot Bot</h3>
-//       <p>Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim.</p>
-//       <p>Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim.</p>
-//       <p>Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim.</p>
-//       <h6>Testare Scam Copilot</h6>
-//     </bd-carousel-item>
-
-//     <bd-carousel-item
-//       title="Scam Wave Alerts"
-//       subTitle="Proactively informs you about scam outbreaks in your region"
-//       modalText="Proactively informs you about scam outbreaks in your region"
-//       icon="src/assets/icons/light-carousel-img1.png"
-//     >
-//       <h3>Scam Wave Alerts</h3>
-//       <p>Proactively informs you about scam outbreaks in your region.</p>
-//     </bd-carousel-item>
-
-//     <bd-carousel-item
-//       title="AI-Powered Scam Check"
-//       subTitle="AI-driven tool that instantly evaluates the legitimacy of any link, message, or online interaction"
-//       modalText="AI-driven tool that instantly evaluates the legitimacy of any link, message, or online interaction"
-//       icon="src/assets/icons/light-carousel-img1.png"
-//     >
-//       <h3>AI-Powered Scam Check</h3>
-//       <p>AI-driven tool that instantly evaluates the legitimacy of any link, message, or online interaction.</p>
-//     </bd-carousel-item>
-
-//     <bd-carousel-item
-//       title="Educational Resources"
-//       subTitle="Access a wealth of information and best practices to stay informed and vigilant against scams"
-//       modalText="Access a wealth of information and best practices to stay informed and vigilant against scams"
-//       icon="src/assets/icons/light-carousel-img1.png"
-//     >
-//       <h3>Educational Resources</h3>
-//       <p>Access a wealth of information and best practices to stay informed and vigilant against scams.</p>
-//     </bd-carousel-item>
-
-//     <bd-carousel-item
-//       title="Phishing Simulator"
-//       subTitle="Simulates phishing attacks to help you recognize and respond appropriately to real threats"
-//       modalText="Simulates phishing attacks to help you recognize and respond appropriately to real threats"
-//       icon="src/assets/icons/light-carousel-img1.png"
-//     >
-//       <h3>Phishing Simulator</h3>
-//       <p>Simulates phishing attacks to help you recognize and respond appropriately to real threats.</p>
-//     </bd-carousel-item>
-
-//     <bd-carousel-item
-//       title="Real-Time Scam Updates"
-//       subTitle="Stay ahead with up-to-the-minute alerts on the latest scams targeting your region or industry"
-//       modalText="Stay ahead with up-to-the-minute alerts on the latest scams targeting your region or industry"
-//       icon="src/assets/icons/light-carousel-img1.png"
-//     >
-//       <h3>Real-Time Scam Updates</h3>
-//       <p>Stay ahead with up-to-the-minute alerts on the latest scams targeting your region or industry.</p>
-//     </bd-carousel-item>
-
-//     <bd-carousel-item
-//       title="Community Reporting Hub"
-//       subTitle="A platform where users can report scams and share experiences to help protect others"
-//       modalText="A platform where users can report scams and share experiences to help protect others"
-//       icon="src/assets/icons/light-carousel-img1.png"
-//     >
-//       <h3>Community Reporting Hub</h3>
-//       <p>A platform where users can report scams and share experiences to help protect others.</p>
-//     </bd-carousel-item>
-
-//     <bd-carousel-item
-//       title="Fraud Prevention Workshops"
-//       subTitle="Interactive workshops that educate users on identifying and avoiding scams"
-//       modalText="Interactive workshops that educate users on identifying and avoiding scams"
-//       icon="src/assets/icons/light-carousel-img1.png"
-//     >
-//       <h3>Fraud Prevention Workshops</h3>
-//       <p>Interactive workshops that educate users on identifying and avoiding scams.</p>
-//     </bd-carousel-item>
-//   </bd-carousel-section>
-
-//   <bd-toggle-radio name="group1" value="opt1" label="Toggle 1" disabled></bd-toggle-radio>
-//   <bd-toggle-radio name="group1" value="opt1" label="Toggle 1" disabled checked></bd-toggle-radio>
-//   <bd-toggle-radio name="group1" value="opt2" label="Toggle 2"></bd-toggle-radio>
-//   <bd-toggle-radio name="billing" value="yearly" label="Yearly"></bd-toggle-radio>
-//   <bd-toggle-radio name="billing" value="monthly" label="Monthly"></bd-toggle-radio>
-//   <bd-radio name="billing" value="yearly" label="Yearly"></bd-radio>
-//   <bd-radio disabled checked label="Test" value="x"></bd-radio>
-//   <bd-checkbox label="Accept terms" checked></bd-checkbox>
-
-//   <div style="padding: 40px 0;">
-//     <bd-divider-horizontal></bd-divider-horizontal>
-//   </div>
-
-//   <bd-badge>Badge</bd-badge>
-// `;