Merge pull request #10 from Teradata/feat/tab-chip-banner

Feat/tab-chip-banner

README.md

@@ -1,62 +1,49 @@
-# WebDesignSystem
+# Web design system
 
-<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
+Web design system is a collection of reusable component libraries designed to streamline the development process and enhance the user interface of your web applications.
 
-✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨
+## Features
 
-## Integrate with editors
+- **Reusable Components:** Currently Web design system provides a variety of reusable React components that you can easily integrate into your projects.
+- **Responsive:** Our components are built with responsiveness in mind, ensuring that they look and function seamlessly across different screen sizes and devices.
 
-Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console
-provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and
-comes with a LSP for Vim users.
+## Installation
 
-## Start the application
-
-Run `npx nx serve web-design-system` to start the development server. Happy coding!
-
-## Build for production
-
-Run `npx nx build web-design-system` to build the application. The build artifacts are stored in the output directory (e.g. `dist/` or `build/`), ready to be deployed.
-
-## Running tasks
-
-To execute tasks with Nx use the following syntax:
-
-```
-npx nx <target> <project> <...options>
-```
-
-You can also run multiple targets:
+You can install react components offered by the Web design system via npm or yarn:
 
-```
-npx nx run-many -t <target1> <target2>
+```bash
+npm install @teradata-web/react-components
 ```
 
-..or add `-p` to filter specific projects
+or
 
-```
-npx nx run-many -t <target1> <target2> -p <proj1> <proj2>
+```bash
+yarn add @teradata-web/react-components
 ```
 
-Targets can be defined in the `package.json` or `projects.json`. Learn more [in the docs](https://nx.dev/features/run-tasks).
+## Usage
 
-## Set up CI!
+To use a component from Web design system, simply import it into your React application and render it:
 
-Nx comes with local caching already built-in (check your `nx.json`). On CI you might want to go a step further.
+```jsx
+import React from 'react';
+import { Button } from '@teradata-web/react-components';
 
-- [Set up remote caching](https://nx.dev/features/share-your-cache)
-- [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution)
-- [Learn more how to setup CI](https://nx.dev/recipes/ci)
+const App = () => {
+  return (
+    <div>
+      <Button onClick={() => alert('Button clicked!')}>Click me</Button>
+    </div>
+  );
+};
 
-## Explore the project graph
-
-Run `npx nx graph` to show the graph of the workspace.
-It will show tasks that you can run with Nx.
+export default App;
+```
 
-- [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph)
+## Documentation
 
-## Connect with us!
+For documentation on each component, including usage examples and available props, please run the below command:
 
-- [Join the community](https://nx.dev/community)
-- [Subscribe to the Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
-- [Follow us on Twitter](https://twitter.com/nxdevtools)
+```bash
+npx nx run react-components:storybook
+```

libs/react-components/.storybook/main.ts

@@ -3,7 +3,11 @@ import { resolve } from 'path';
 
 const config: StorybookConfig = {
   stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+  ],
   framework: {
     name: '@storybook/react-vite',
     options: {

libs/react-components/src/lib/_mixins.scss

@@ -23,7 +23,7 @@
 @mixin caret() {
   .caret {
     content: '';
-    border: solid #333a3e;
+    border: solid var(--td-web-gray-700);
     border-width: 0 2px 2px 0;
     padding: 3px;
     transform: rotate(45deg);

libs/react-components/src/lib/components/Banner/Banner.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Banner from './index';
+import Button from '../Button';
+
+const demoContent = (
+  <p>
+    There are situations when you want to quickly validate a machine learning
+    model idea. You have a model type in mind. You don't want to operationalize
+    with an ML pipeline just yet. You just want to test out if the relationship
+    you had in mind exists. Also, sometimes even your production deployment
+    doesn't require constant relearning with MLops. In such cases, you can use
+    Vantage Analytics Library (VAL) and multiple ML model types it supports.
+  </p>
+);
+
+const meta = {
+  title: 'Components/Banner',
+  component: Banner,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+  args: {
+    content: (
+      <>
+        {demoContent}
+        <Button label="Get started" icon="fa fa-arrow-right" trailingIcon />
+      </>
+    ),
+    imageSrc:
+      'https://www.teradata.com/getmedia/46d83f57-61b3-43aa-84a4-4cfbd408a1fa/roles-business_leader.svg?origin=fd',
+    title: 'Train ML models in Vantage',
+  },
+} satisfies Meta<typeof Banner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};

libs/react-components/src/lib/components/Banner/index.tsx

@@ -0,0 +1,40 @@
+import React, { ReactNode } from 'react';
+import styles from './styles.module.scss';
+
+interface BannerProps {
+  /**
+   * Content to be displayed in the banner. Accepts any ReactNode.
+   */
+  content: ReactNode;
+  /**
+   * Source for the banner image.
+   */
+  imageSrc: string;
+  /**
+   * Alt text for the banner image.
+   */
+  imageAltText?: string;
+  /**
+   * Title of the banner.
+   */
+  title: string;
+}
+
+const Banner: React.FC<BannerProps> = ({
+  content = '',
+  imageSrc = '',
+  imageAltText = 'Banner Image',
+  title = '',
+}) => {
+  return (
+    <div className={styles.banner}>
+      <section className={styles.bannerInfo}>
+        <h3 className={styles.bannerTitle}>{title}</h3>
+        <div className={styles.bannerContent}>{content}</div>
+      </section>
+      <img className={styles.bannerImage} src={imageSrc} alt={imageAltText} />
+    </div>
+  );
+};
+
+export default Banner;

libs/react-components/src/lib/components/Banner/styles.module.scss

@@ -0,0 +1,51 @@
+.banner {
+  align-items: center;
+  background-color: inherit;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column-reverse;
+  font-family: var(--mdc-typography-headline5-font-family);
+  gap: 2rem;
+  justify-content: space-between;
+  margin: 0 auto;
+  max-width: 1440px;
+  min-width: 100%;
+}
+
+.bannerTitle {
+  color: var(--td-web-primary-navy);
+  font-size: var(--mdc-typography-headline5-font-size);
+  font-weight: var(--mdc-typography-headline3-font-weight);
+  letter-spacing: -0.24px;
+  line-height: var(--mdc-typography-headline4-font-size);
+  margin: 0;
+}
+
+.bannerContent {
+  color: var(--td-web-gray-700);
+  font-size: 1.125rem;
+  margin-top: 1rem;
+}
+
+.bannerInfo,
+.bannerImage {
+  flex: 1 0 100%;
+  max-width: 100%;
+  width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .banner {
+    flex-direction: row;
+  }
+
+  .bannerImage {
+    flex: 1 0 calc(47.5% - 50px);
+    max-width: calc(47.5% - 50px);
+  }
+
+  .bannerInfo {
+    flex: 1 0 50%;
+    max-width: 50%;
+  }
+}

libs/react-components/src/lib/components/Blackout/styles.module.css

@@ -5,7 +5,7 @@
   top: 0;
   left: 0;
   pointer-events: all;
-  background-color: #ced3da;
+  background-color: var(--td-web-gray-100);
   opacity: 0.1;
   transition: opacity 0.25s ease;
   transform: translateX(-100%);

libs/react-components/src/lib/components/Button/Button.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Button from './index';
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+  args: {
+    label: 'Data engineer',
+    size: 'medium',
+    primary: true,
+    icon: 'fa fa-arrow-right',
+    trailingIcon: false,
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};

libs/react-components/src/lib/components/Button/index.tsx

@@ -1,6 +1,11 @@
+import Icon from '../Icon';
 import styles from './styles.module.css';
 
 interface ButtonProps {
+  /**
+   * Icon to be displayed in the button
+   */
+  icon?: string;
   /**
    * The label of the button
    */
@@ -14,29 +19,34 @@ interface ButtonProps {
    */
   size?: 'small' | 'medium' | 'large';
   /**
-   * Background color of the button
+   * Whether the icon is placed in the trailing position
    */
-  backgroundColor?: string;
+  trailingIcon?: boolean;
   /**
    * Click handler for the button
    */
   onClick?: () => void;
 }
 
 const Button: React.FC<ButtonProps> = ({
+  icon,
   label,
   primary,
   size,
-  backgroundColor,
+  trailingIcon,
   onClick,
 }) => {
   return (
     <button
       type="button"
-      className={`${styles.tdButton} ${primary ? styles.tdButtonPrimary : styles.tdButtonSecondary} ${size ? `tdButton${size}` : ''}`}
-      style={{ backgroundColor: backgroundColor }}
+      className={`${styles.tdButton} ${
+        primary ? styles.tdButtonPrimary : styles.tdButtonSecondary
+      } ${size ? `tdButton${size}` : ''} ${
+        trailingIcon ? styles.trailingIcon : ''
+      }`}
       onClick={onClick}
     >
+      {icon && <Icon className={icon} style={{ fontSize: '0.75rem' }} />}
       {label}
     </button>
   );

libs/react-components/src/lib/components/Button/styles.module.css

@@ -3,16 +3,17 @@
   position: relative;
   display: inline-flex;
   align-items: center;
+  gap: 0.75rem;
   min-width: 0;
   margin-bottom: 0;
   padding: 12px 16px;
-  border: 1px solid #00233c;
+  border: 1px solid var(--td-web-primary-navy);
   border-radius: 12px;
-  background: #00233c;
+  background: var(--td-web-primary-navy);
   font-weight: 600;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: #fff;
+  color: var(--cv-theme-surface-container-lowest);
   text-align: center;
   text-decoration: none;
   overflow: hidden;
@@ -24,17 +25,21 @@
   transition: all 0.25s ease-in-out 0s;
 
   &:hover {
-    background: #ff5f02;
-    border-color: #ff5f02;
+    background: var(--cv-theme-tertiary);
+    border-color: var(--cv-theme-tertiary);
+  }
+
+  &.trailingIcon {
+    flex-direction: row-reverse;
   }
 }
 
 .tdButtonSecondary {
   background: transparent;
-  border-color: #00233c;
-  color: #00233c;
+  border-color: var(--td-web-primary-navy);
+  color: var(--td-web-primary-navy);
   &:hover {
     background: rgba(0, 35, 60, 0.15);
-    border-color: #00233c;
+    border-color: var(--td-web-primary-navy);
   }
 }