@dktunited-techoff/techoff-suite-ui 0.8.0

package/src/layouts/Header/Header.css

@@ -0,0 +1,83 @@
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../assets/fonts/Montserrat-Medium.ttf');
+}
+
+/* ######## */
+/* HEADER   */
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 64px;
+  padding: 0 24px;
+}
+.header-actions {
+  display: flex;
+}
+.header-actions > * {
+  margin-left: 12px;
+}
+
+/* ############## */
+/* HEADER TITLE   */
+.header-title-container {
+  display: flex;
+  align-items: flex-end;
+  height: 30px;
+}
+.header-title {
+  font-family: 'Montserrat';
+  font-size: 25px;
+  line-height: 19px;
+  text-transform: uppercase;
+}
+.header-by {
+  margin-left: 15px;
+  font-family: 'Montserrat';
+  font-size: 12px;
+  line-height: 10px;
+  text-transform: uppercase;
+}
+.header-techoff {
+  width: 64px;
+  margin-left: 4px;
+  margin-bottom: -2px;
+}
+
+/* ################ */
+/* HEADER PROFILE   */
+.header-profile {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding: 0 4px;
+  border-radius: 9999px;
+  box-shadow: 0px 12px 12px 0px #00537d1a;
+  background: white;
+}
+.header-profile--icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 9999px;
+  background: #e5e5e5;
+}
+.header-profile--name {
+  padding-left: 8px;
+  padding-right: 12px;
+  color: #4e5d6b;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/src/layouts/Header/Header.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Children, PropsWithChildren } from 'react';
+import { isSuiteElement } from '../../utils/validator.utils';
+import './Header.css';
+
+export const Header = ({ children }: PropsWithChildren) => {
+  const titleElement = Children.toArray(children).find(c => isSuiteElement(c, 'HeaderTitle'));
+  const actionsElement = Children.toArray(children).find(c => isSuiteElement(c, 'HeaderActions'));
+
+  // #########
+  // Rendering
+  return (
+    <header>
+      <div>{titleElement}</div>
+      <div>{actionsElement}</div>
+    </header>
+  );
+};

package/src/layouts/Header/Header.types.ts

@@ -0,0 +1 @@
+export type HeaderProfileProps = { firstname: string; lastname: string };

package/src/layouts/Header/HeaderActions.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+
+export const HeaderActions = ({ children }: PropsWithChildren) => {
+  // #########
+  // Rendering
+  return <div className="header-actions">{children}</div>;
+};

package/src/layouts/Header/HeaderProfile.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Icon } from '../../components/Icon/Icon';
+import { capitalize } from '../../utils/string.utils';
+import { HeaderProfileProps } from './Header.types';
+
+export const HeaderProfile = ({ firstname, lastname }: HeaderProfileProps) => {
+  // #########
+  // Rendering
+  return (
+    <div className="header-profile">
+      <div className="header-profile--icon">
+        <Icon name="user" size="16" />
+      </div>
+
+      <div className="header-profile--name">
+        {capitalize(firstname)} {lastname.charAt(0).toUpperCase()}.
+      </div>
+    </div>
+  );
+};

package/src/layouts/Header/HeaderTitle.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+
+const svg =
+  '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 335 62.6" style="enable-background:new 0 0 335 62.6;" xml:space="preserve"><style type="text/css">	.st0{fill:#0883C4;}	.st1{fill:#FFFFFF;}</style><path d="M126.2,24.4c-3.1-3.3-7.4-5.3-12.4-5.3c-9.2,0-16,6.8-16,16.1c0,9.3,6.7,16.2,16,16.2c5.3,0,9.6-2.4,12.6-6l8.1,7.3	c-5.4,6.5-12.1,9.8-20.7,9.8C98,62.6,86.4,51,86.4,35.3C86.4,19.5,98,8,113.8,8c8.2,0,15.4,3,20.3,8.5L126.2,24.4z"/><polygon points="46.8,9.5 80.3,9.5 80.3,19.9 58,19.9 58,30.8 77.3,30.8 77.3,40.9 58,40.9 58,52.1 80.3,52.1 80.3,62.6 46.8,62.6 	"/><polygon points="265.4,8.7 297,8.7 297,19.2 276.6,19.2 276.6,32.6 294,32.6 294,42.8 276.6,42.8 276.6,61.8 265.4,61.8 "/><polygon points="303.4,8.7 335,8.7 335,19.2 314.6,19.2 314.6,32.6 332,32.6 332,42.8 314.6,42.8 314.6,61.8 303.4,61.8 "/><polygon points="174.5,40.1 152,40.1 152,61.8 140.8,61.8 140.8,8.7 152,8.7 152,29.2 174.5,29.2 174.5,8.7 185.7,8.7 185.7,61.8 	174.5,61.8 "/><polygon points="0,9.5 40.3,9.5 40.3,20.4 25.8,20.4 25.8,62.6 14.6,62.6 14.6,20.4 0,20.4 "/><polyline points="188.4,15.9 198.6,0 209.9,0 199.7,15.9 188.4,15.9 "/><path d="M231.7,8c-15.8,0-27.4,11.5-27.4,27.3c0,15.8,11.6,27.3,27.4,27.3c15.7,0,27.2-11.5,27.2-27.3C258.9,19.5,247.4,8,231.7,8z"	/><polygon class="st0" points="208,36.3 243.1,15.9 243,56.6 "/><polygon class="st1" points="231.1,56.7 230.6,37.4 214.2,47.6 "/></svg>';
+
+export const HeaderTitle = ({ children }: PropsWithChildren) => {
+  // #########
+  // Rendering
+  return (
+    <div className="header-title-container">
+      <div className="header-title">{children}</div>
+      <div className="header-by">BY</div>
+      <div className="header-techoff" dangerouslySetInnerHTML={{ __html: svg }} />
+    </div>
+  );
+};

package/src/layouts/Header/__stories__/Header.stories.mdx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Header } from '../Header';
+import { HeaderActions } from '../HeaderActions';
+import { HeaderTitle } from '../HeaderTitle';
+import { HeaderProfile } from '../HeaderProfile';
+import { Button } from '../../../components/Button/Button';
+
+<Meta title="Layouts/Header" />
+
+# Header
+
+The header will allow users to quickly find the information they need at a glance but also make some actions. The header is therefore central in the design of each application: it contains all the essential information, obvious shortcuts, which will help boost Deacthlon Techoff brand image.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      children: [
+        <HeaderTitle>Techoff Suite UI</HeaderTitle>,
+        <HeaderActions>
+          <Button icon="plus" size="lg" variant="shadow" rounded onClick={() => {}} />
+          <HeaderProfile firstname="John" lastname="Doe" />
+        </HeaderActions>,
+      ],
+    }}
+  >
+    {args => <Header>{args.children}</Header>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Header} />

package/src/layouts/Navigation/Navigation.css

@@ -0,0 +1,74 @@
+.navigation {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 24px;
+}
+
+/* ############ */
+/* BREADCRUMB   */
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  padding-right: 20px;
+}
+.breadcrumb-container {
+  display: flex;
+  align-items: center;
+}
+.breadcrumb-chevron {
+  padding: 0 8px;
+  color: #00689d;
+}
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  border-radius: 9999px;
+  color: #00689d;
+}
+.breadcrumb-item--highlight {
+  padding: 0 20px;
+  box-shadow: 0px 6px 6px 0px #00537d1a;
+  background: linear-gradient(270.22deg, #007dbc 43.94%, #7ebee0 114.83%);
+  color: #ffffff;
+}
+.breadcrumb-item--link {
+  cursor: pointer;
+}
+.breadcrumb-item--link:hover {
+  text-decoration: underline;
+}
+.breadcrumb-item--icon {
+  padding-right: 8px;
+}
+
+/* ######### */
+/* DIVIDER   */
+.navigation-divider {
+  flex: 1;
+  height: 1px;
+  margin: 4px 0;
+  background: #b3bac3;
+}
+
+/* ######### */
+/* ACTIONS   */
+.navigation-actions {
+  /* flex items-center [&>*]:ml-4 */
+  display: flex;
+  align-items: center;
+}
+.navigation-actions > * {
+  margin-left: 16px;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/src/layouts/Navigation/Navigation.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Children, PropsWithChildren } from 'react';
+import { isSuiteElement } from '../../utils/validator.utils';
+import './Navigation.css';
+
+export const Navigation = ({ children }: PropsWithChildren) => {
+  const breadcrumbElement = Children.toArray(children).find(c => isSuiteElement(c, 'NavigationBreadcrumb'));
+  const actionsElement = Children.toArray(children).find(c => isSuiteElement(c, 'NavigationActions'));
+
+  // #########
+  // Rendering
+  return (
+    <div className="navigation">
+      {breadcrumbElement}
+      <div className="navigation-divider" />
+      {actionsElement}
+    </div>
+  );
+};

package/src/layouts/Navigation/Navigation.types.ts

@@ -0,0 +1 @@
+export type NavigationBreadcrumbItemProps = { icon?: string; highlight?: boolean; onClick?: () => void };

package/src/layouts/Navigation/NavigationActions.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import './Navigation.css';
+
+export const NavigationActions = ({ children }: PropsWithChildren) => (
+  <div className="navigation-actions">{children}</div>
+);

package/src/layouts/Navigation/NavigationBreadcrumb.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Children, PropsWithChildren } from 'react';
+import { NavigationBreadcrumbItemProps } from './Navigation.types';
+import { Icon } from '../../components/Icon/Icon';
+import { isSuiteElement } from '../../utils/validator.utils';
+import './Navigation.css';
+
+export const NavigationBreadcrumbItem = ({
+  children,
+  icon,
+  highlight,
+  onClick,
+}: PropsWithChildren<NavigationBreadcrumbItemProps>) => {
+  // #########
+  // Rendering
+  return (
+    <div
+      className={`
+        breadcrumb-item
+        ${highlight ? 'breadcrumb-item--highlight' : ''} ${onClick ? 'breadcrumb-item--link' : ''}
+      `}
+      onClick={onClick}
+    >
+      {icon && (
+        <div className="breadcrumb-item--icon">
+          <Icon name={icon} size="16" />
+        </div>
+      )}
+
+      {children}
+    </div>
+  );
+};
+
+export const NavigationBreadcrumb = ({ children }: PropsWithChildren) => {
+  const breadcrumbItemElements = Children.toArray(children).filter(c => isSuiteElement(c, 'NavigationBreadcrumbItem'));
+
+  // #########
+  // Rendering
+  return (
+    <div className="breadcrumb">
+      {breadcrumbItemElements.map((child, index) => (
+        <div key={index} className="breadcrumb-container">
+          {child}
+
+          {index !== breadcrumbItemElements.length - 1 && (
+            <div className="breadcrumb-chevron">
+              <Icon name="chevron-right" />
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/layouts/Navigation/__stories__/Navigation.stories.mdx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Navigation } from '../Navigation';
+import { NavigationBreadcrumb, NavigationBreadcrumbItem } from '../NavigationBreadcrumb';
+import { NavigationActions } from '../NavigationActions';
+import { Button } from '../../../components/Button/Button';
+import { icons } from '../../../components/Icon/icons';
+
+<Meta title="Layouts/Navigation" />
+
+# Navigation
+
+Breadcrumbs are an important navigation component that shows content hierarchy. They allow users to be aware of their current location in the hierarchical structure of the application. Breadcrumbs enable users to quickly move up to a parent level. Moreover this navigation component allows user to make some actions.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      children: [
+        <NavigationBreadcrumb>
+          <NavigationBreadcrumbItem icon="home" onClick={() => {}}>
+            Home
+          </NavigationBreadcrumbItem>
+          <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>
+          <NavigationBreadcrumbItem highlight>Menu Item 2</NavigationBreadcrumbItem>
+        </NavigationBreadcrumb>,
+        <NavigationActions>
+          <Button icon="check" onClick={() => {}}>
+            Action 1
+          </Button>
+          <Button icon="plus" onClick={() => {}}>
+            Action 2
+          </Button>
+        </NavigationActions>,
+      ],
+    }}
+  >
+    {args => <Navigation>{args.children}</Navigation>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Navigation} />

package/src/utils/string.utils.ts

@@ -0,0 +1 @@
+export const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();

package/src/utils/validator.utils.ts

@@ -0,0 +1,8 @@
+import { JSXElementConstructor, ReactElement, ReactNode, ReactPortal, isValidElement } from 'react';
+
+export const isSuiteElement = (
+  element: string | number | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal,
+  name: string,
+) => {
+  return isValidElement(element) && typeof element.type === 'function' && element.type.name === name;
+};