Skip to content

[Minor] First version of the Quick Nav component #908

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 11, 2022
Merged

[Minor] First version of the Quick Nav component #908

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6f6ebab
[Minor] First version of the Quick Nav component
raquelarrojo Apr 11, 2022
1dd0255
[QuickNav] Change in quickNav
raquelarrojo Apr 11, 2022
9dccd2c
[QuickNav] Change in quickNav example
raquelarrojo Apr 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
249 changes: 249 additions & 0 deletions app/src/pages/QuickNav.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,249 @@
import React from "react";
import styled from "styled-components";
import {
DxcQuickNav,
DxcHeading,
DxcText,
DxcStack,
} from "@dxc-technology/halstack-react";

const links = [
{
label: "Overview",
id: "overview",
},
{
label: "Principles",
id: "principles",
links: [
{ label: "Color", id: "color" },
{ label: "Spacing", id: "spacing" },
{ label: "Typography", id: "typography" },
{ label: "Layout", id: "layout" },
{
label: "Themes",
id: "themes",
links: [
{ label: "Light", id: "light" },
{ label: "Dark", id: "dark" },
],
},
],
},
];

function App() {
return (
<Container>
<ContentContainer>
<Content id="overview">
<DxcHeading level={1} text="Overview" margin={{ bottom: "small" }} />
<DxcText>
Halstack is the DXC Technology's open source design system for
insurance products and digital experiences. Our system provides all
the tools and resources needed to create superior, beautiful but
above all, functional user experiences.
</DxcText>
</Content>
<Content id="principles">
<DxcHeading
level={1}
text="Principles"
margin={{ top: "small", bottom: "xsmall" }}
/>
<Content id="color">
<DxcHeading
level={2}
text="Color"
margin={{ top: "xsmall", bottom: "xsmall" }}
/>
<DxcText>
The color palette is an essential asset as a communication
resource of our design system. Halstack color palette brings a
unified consistency and helps in guiding the user's perception
order. Our color palette is based in the HSL model . All our color
families are calculated using the lightness value of the standard
DXC palette colors. Color Tokens Halstack uses tokens to manage
color. Appart from a multi-purpose greyscale family, purple and
blue are the core color families used in our set of components.
Additional families as red, green and yellow help as feedback
role-based color palettes and must not be used outside this
context.
</DxcText>
</Content>
<Content id="spacing">
<DxcHeading
level={2}
text="Spacing"
margin={{ top: "xsmall", bottom: "xsmall" }}
/>
<DxcText>
In the search of consistent alignment between the elements we
provide a spacing scale based on a root values of 8px and 4px. The
numbers 4 and 8 are easily multiplied, they provide flexible and
consistent, yet distinct enough, steps between them.
</DxcText>
</Content>
<Content id="typography">
<DxcHeading
level={2}
text="Typography"
margin={{ top: "xsmall", bottom: "xsmall" }}
/>
<DxcText>
Our selected typography helps in structuring our user's experience
based on the visual impact that it has on the user interface
content. It defines what is the first noticeable piece of
information or data based on the font shape, size, color, or type
and it highlights some pieces of text over the rest. Some
typographic elements used in Halstack Design System include
headers, body, taglines, captions, and labels. Make sure you
include all the different typographic variants in order to enhance
the application's content structure, including the Heading
component which defines different levels of page and section
titles
</DxcText>
</Content>
<Content id="layout">
<DxcHeading
level={2}
text="Layout"
margin={{ top: "xsmall", bottom: "xsmall" }}
/>
<DxcText>
The grid provides the foundation for consistently positioning
elements onscreen. The 8x Grid is the geometric foundation of all
the visual elements of Halstack Design System components and
spacing. It provides structure and guidance for all creative
decision-making.The grid provides the foundation for consistently
positioning elements onscreen. The 8x Grid is the geometric
foundation of all the visual elements of Halstack Design System
components and spacing. It provides structure and guidance for all
creative decision-making.The grid provides the foundation for
consistently positioning elements onscreen. The 8x Grid is the
geometric foundation of all the visual elements of Halstack Design
System components and spacing. It provides structure and guidance
for all creative decision-making.The grid provides the foundation
for consistently positioning elements onscreen. The 8x Grid is the
geometric foundation of all the visual elements of Halstack Design
System components and spacing. It provides structure and guidance
for all creative decision-making.The grid provides the foundation
for consistently positioning elements onscreen. The 8x Grid is the
geometric foundation of all the visual elements of Halstack Design
System components and spacing. It provides structure and guidance
for all creative decision-making.The grid provides the foundation
for consistently positioning elements onscreen. The 8x Grid is the
geometric foundation of all the visual elements of Halstack Design
System components and spacing. It provides structure and guidance
for all creative decision-making.The grid provides the foundation
for consistently positioning elements onscreen. The 8x Grid is the
geometric foundation of all the visual elements of Halstack Design
System components and spacing. It provides structure and guidance
for all creative decision-making.
</DxcText>
</Content>
<Content id="themes">
<DxcHeading
level={2}
text="Themes"
margin={{ top: "xsmall", bottom: "xsmall" }}
/>
<DxcText>
In order to understand what a theme is, we need to understand
first that the definition of colors, sizes, shapes... is an
intrinsic part of a design system. Since these parameters are
essential for guaranteeing accessibility and a good user
experience, having the ability of changing them, might go
frontally against the intentions of the design system. This is
precisely what themes are, just custom defined objects that allow
users to override fundamental decisions of Halstack Design System.
They are a way of escaping the restrictions imposed by the Design
System, and using themes could result in applications not being
compliant with the Halstack guidelines, or even introducing many
different types of accessibility issues if not used carefully.
Typically, you would create a Halstack Design System application,
and after that, only if there is a white-labeling requirement, we
would apply a theme on top of the base application. This, and only
this, is the whole purpose of using themes.In order to understand
what a theme is, we need to understand first that the definition
of colors, sizes, shapes... is an intrinsic part of a design
system. Since these parameters are essential for guaranteeing
accessibility and a good user experience, having the ability of
changing them, might go frontally against the intentions of the
design system. This is precisely what themes are, just custom
defined objects that allow users to override fundamental decisions
of Halstack Design System. They are a way of escaping the
restrictions imposed by the Design System, and using themes could
result in applications not being compliant with the Halstack
guidelines, or even introducing many different types of
accessibility issues if not used carefully. Typically, you would
create a Halstack Design System application, and after that, only
if there is a white-labeling requirement, we would apply a theme
on top of the base application. This, and only this, is the whole
purpose of using themes.In order to understand what a theme is, we
need to understand first that the definition of colors, sizes,
shapes... is an intrinsic part of a design system. Since these
parameters are essential for guaranteeing accessibility and a good
user experience, having the ability of changing them, might go
frontally against the intentions of the design system. This is
precisely what themes are, just custom defined objects that allow
users to override fundamental decisions of Halstack Design System.
They are a way of escaping the restrictions imposed by the Design
System, and using themes could result in applications not being
compliant with the Halstack guidelines, or even introducing many
different types of accessibility issues if not used carefully.
Typically, you would create a Halstack Design System application,
and after that, only if there is a white-labeling requirement, we
would apply a theme on top of the base application. This, and only
this, is the whole purpose of using themes.In order to understand
what a theme is, we need to understand first that the definition
of colors, sizes, shapes... is an intrinsic part of a design
system. Since these parameters are essential for guaranteeing
accessibility and a good user experience, having the ability of
changing them, might go frontally against the intentions of the
design system. This is precisely what themes are, just custom
defined objects that allow users to override fundamental decisions
of Halstack Design System. They are a way of escaping the
restrictions imposed by the Design System, and using themes could
result in applications not being compliant with the Halstack
guidelines, or even introducing many different types of
accessibility issues if not used carefully. Typically, you would
create a Halstack Design System application, and after that, only
if there is a white-labeling requirement, we would apply a theme
on top of the base application. This, and only this, is the whole
purpose of using themes.
</DxcText>
</Content>
</Content>
</ContentContainer>
<QuickNavContainer>
<DxcQuickNav title="Sections" links={links}></DxcQuickNav>
</QuickNavContainer>
</Container>
);
}

const Container = styled.div`
display: flex;
flex-direction: row;
width: 100%;
`;

const ContentContainer = styled.div`
display: flex;
flex-direction: column;
padding: 60px;
margin: 0 auto;
width: 800px;
`;

const Content = styled.div``;

const QuickNavContainer = styled.div`
max-height: calc(100vh - 100px);
position: sticky;
top: 100px;
width: 300px;
`;

export default App;
6 changes: 6 additions & 0 deletions app/src/paths.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import NumberInput from "./pages/NumberInput";
import Textarea from "./pages/Textarea";
import Select from "./pages/Select";
import FileInput from "./pages/FileInput";
import QuickNav from "./pages/QuickNav";

export default [
{
Expand Down Expand Up @@ -146,6 +147,11 @@ export default [
name: "Progress bar",
component: ProgressBar,
},
{
path: "quickNav",
name: "Quick nav",
component: QuickNav,
},
{
path: "radio",
name: "Radio",
Expand Down
26 changes: 26 additions & 0 deletions docs/src/pages/components/cdk-components/quick-nav/QuickNav.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from "react";
import ComponentDoc from "../../common/ComponentDoc";
import Section from "../../common/Section";
import Example from "../../common/Example";
import ComponentHeader from "../../common/ComponentHeader";
import InputPropsTable from "./api.jsx";
import { DxcHeading } from "@dxc-technology/halstack-react";
import quickNav from "./examples/quickNav";

function QuickNav() {
return (
<ComponentDoc>
<ComponentHeader title="QuickNav" status="experimental"></ComponentHeader>
<Section>
<DxcHeading level={3} text="Props" margin={{ bottom: "small" }} />
<InputPropsTable />
</Section>
<Section>
<DxcHeading level={3} text="Examples" margin={{ bottom: "small" }} />
<Example title="QuickNav" example={quickNav}></Example>
</Section>
</ComponentDoc>
);
}

export default QuickNav;
42 changes: 42 additions & 0 deletions docs/src/pages/components/cdk-components/quick-nav/api.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from "react";
import { DxcTable } from "@dxc-technology/halstack-react";

const quickNavPropsTable = () => {
return (
<DxcTable>
<tr>
<th>Name</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>title: string</td>
<td></td>
<td>Title of the quick nav component.</td>
</tr>
<tr>
<td>links: Link[]</td>
<td></td>
<td>
Links to be shown inside the quick nav component. Each link is
composed by:
<ul>
<li>
<b>Label: string</b>: Label to be shown in the link.
</li>
<li>
<b>Id: string</b>: Id used to navigate to the section that the
link refers. This id must be passed to the wrapper that contains
the section to make possible the navigation.
</li>
<li>
<b>links: Link[]</b>: Sublinks of the link.
</li>
</ul>
</td>
</tr>
</DxcTable>
);
};

export default quickNavPropsTable;
38 changes: 38 additions & 0 deletions docs/src/pages/components/cdk-components/quick-nav/examples/quickNav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { DxcQuickNav } from "@dxc-technology/halstack-react";
import { useState } from "react";

const code = `() => {
const links = [
{
label: "Overview",
links: [
{
label: "Introduction",
href: "introduction",
},
],
},
{
label: "Principles",
href: "principles",
links: [
{ label: "Color", href: "color" },
{ label: "Spacing", href: "spacing" },
{ label: "Typography", href: "typography" },
],
},
];

return (
<div style={{ margin: "30px" }}>
<DxcQuickNav title="Sections" links={links}></DxcQuickNav>
</div>
);
}`;

const scope = {
DxcQuickNav,
useState,
};

export default { code, scope };
Loading