Skip to content

Commit

Permalink
Add NAD Colors Section in Storybook
Browse files Browse the repository at this point in the history
  • Loading branch information
Yauheni Kapliarchuk authored and Yauheni Kapliarchuk committed Aug 13, 2024
1 parent 5ffcea5 commit d4490c1
Show file tree
Hide file tree
Showing 3 changed files with 336 additions and 0 deletions.
18 changes: 18 additions & 0 deletions src/documentation/core/colors/ColorsNAD.stories.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import {ColorsNAD} from "./ColorsNAD";
import {Meta} from "@storybook/addon-docs/blocks";

<Meta
title="Documentation/Core/Colors NAD"
subtitle="subtitle"
parameters={{
previewTabs: {
canvas: {hidden: true},
},
}}
/>

## Colors NAD

> Color styles define how color is used in the design system of NAD.
<ColorsNAD/>
141 changes: 141 additions & 0 deletions src/documentation/core/colors/ColorsNAD.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
import React from "react";

import {colorsConfigNAD} from "./_configNAD";
import "./colors.scss";
import {ColorItem} from "./ColorItem";
import {ColorTooltip} from "./ColorTooltip";

export const ColorsNAD = (): JSX.Element => {
const nadDenimColorRows: JSX.Element[][] = [];
nadDenimColorRows.push(generateColorRows(colorsConfigNAD.nadDenim));

const neutralsColorRows: JSX.Element[][] = [];
neutralsColorRows.push(generateColorRows(colorsConfigNAD.neutralsColors));


return (
<div>
<h2>{colorsConfigNAD.brightColorsLabel}</h2>
{nadDenimColorRows[0][0]}
{nadDenimColorRows[0][2]}
<h2>{colorsConfigNAD.neutralsColorsLabel}</h2>
{neutralsColorRows[0][0]}
{neutralsColorRows[0][2]}
<h1>Extended Colors</h1>
{nadDenimColorRows[0][1]}
{nadDenimColorRows[0][3]}
{neutralsColorRows[0][1]}
{neutralsColorRows[0][3]}
</div>
)
}

const generateTableItem = (theme: string, hex: string, rgb: string) => {
return (
<tr tabIndex={0} className={"tr-table"}>
<td width={"40px"} className={"td-table"}>
<div className="color-square__table" style={{backgroundColor: hex}}/>
</td>
<td>{theme}</td>
<td width={"45%"} className={"td-table"}>
<span className="color__table">HEX</span>
: <ColorTooltip content={hex} id={`${theme}-${hex}`}/>
</td>
<td width={"25%"} className={"td-table"}>
<span className="color__table">RGB</span>
: <ColorTooltip content={rgb} id={`${theme}-${rgb}`}/>
</td>
</tr>
)
}

const generateColorRows = (colors: ColorItem[][]) => {
const rows: JSX.Element[] = [];

colors.forEach(row => {
const boxes: ColorItem[] = [];

row.forEach(box => boxes.push(box));

const htmlBoxes: JSX.Element[] = [];
const colorsTables: JSX.Element[] = [];

boxes.forEach(box => {

if (box.color_1) {
const group =
<span style={{color: "#717171", fontSize: "14px"}}> {`(${box.group})`}</span>
const table =
<div>
<h3>
{box.name}
{group}
</h3>
<table width={"100%"} className={"colors-table"}>
{box.rgb_1 && generateTableItem(box.name + " - Darker", box.color_1, box.rgb_1)}
{box.color_2 && box.rgb_2 && generateTableItem(box.name + " - Dark", box.color_2, box.rgb_2)}
{generateTableItem(box.name + " - Base", box.color_3, box.rgb)}
{box.color_4 && box.rgb_4 && generateTableItem(box.name + " - Light", box.color_4, box.rgb_4)}
{box.color_5 && box.rgb_5 && generateTableItem(box.name + " - Lighter", box.color_5, box.rgb_5)}
</table>
<br/>
<hr/>
<br/>
</div>

colorsTables.push(table);
}

const element =
<div className={"box"}>
<div className={"box-1"} style={{backgroundColor: box.color_3}}/>
<div className="colors-list">
{box.color_1 &&
<>
<div className={"colors-item"} style={{backgroundColor: box.color_1}}/>
<div className={"colors-item"} style={{backgroundColor: box.color_2}}/>
<div className={"colors-item"} style={{backgroundColor: box.color_3}}/>
<div className={"colors-item"} style={{backgroundColor: box.color_4}}/>
<div className={"colors-item"} style={{backgroundColor: box.color_5}}/>
</>
}
</div>
<div className={"box-3"}>
<span className={"colors-name span"}>{box.name}</span>
<ColorTooltip label={"HEX"} content={box.hex} id={`${box.name}-${box.hex}`}/>
<ColorTooltip label={"RGB"} content={box.rgb} id={`${box.name}-${box.rgb}`}/>
{box.cmyk &&
<ColorTooltip label={"CMYK"} content={box.cmyk} id={`${box.name}-${box.cmyk}`}/>
}
{box.pantone &&
<ColorTooltip label={"Pantone"} content={box.pantone} id={`${box.name}-${box.pantone}`}/>
}
{box.sass &&
<ColorTooltip label={"SASS"} content={box.sass} id={`${box.name}-${box.sass}`}/>
}
</div>
</div>
htmlBoxes.push(element);
});

rows.push(
<div className={"row"}>
{htmlBoxes[0]}
{htmlBoxes[1]}
{htmlBoxes[2]}
{htmlBoxes[3]}
</div>
);

rows.push(
<>
{colorsTables[0]}
{colorsTables[1]}
{colorsTables[2]}
{colorsTables[3]}
</>
);
});

return rows;
}
177 changes: 177 additions & 0 deletions src/documentation/core/colors/_configNAD.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
export const colorsConfigNAD = {
nadDenim: [
[
{
name: "NAD Denim",
group: "denim",
hex: "#003B5C",
rgb: "rgb(0, 59, 92)",
cmyk: "100,36,0,64",
pantone: "302C",
color_1: "#001724",
color_2: "#002D46",
color_3: "#003B5C",
color_4: "#51BEFB",
color_5: "#86D4FF",
rgb_1: "rgb(0, 23, 36)",
rgb_2: "rgb(0,45,70)",
rgb_4: "rgb(81,190,251)",
rgb_5: "rgb(134,212,255)"
},
{
name: "Nile",
group: "bright",
hex: "#007681",
rgb: "rgb(0, 118, 129)",
cmyk: "100,9,0,49",
pantone: "7474C",
color_1: "#142C2E",
color_2: "#1D5358",
color_3: "#007681",
color_4: "#76EFFA",
color_5: "#BAF5FA",
rgb_1: "rgb(20,44,46)",
rgb_2: "rgb(29,83,88)",
rgb_4: "rgb(118,239,250)",
rgb_5: "rgb(186,245,250)"
},
{
name: "Amethyst",
group: "bright",
hex: "#582C83",
rgb: "rgb(88, 44, 131)",
cmyk: "33,66,0,49",
pantone: "268C",
color_1: "#1E0D2E",
color_2: "#31174B",
color_3: "#582C83",
color_4: "#C189F8",
color_5: "#DBC5F1",
rgb_1: "rgb(30, 13, 46)",
rgb_2: "rgb(49, 23, 75)",
rgb_4: "rgb(193, 137, 248)",
rgb_5: "rgb(219, 197, 241)"
},

{
name: "Spark",
group: "bright",
hex: "#D86018",
rgb: "rgb(217,95,24)",
cmyk: "0,56,89,15",
pantone: "1595C",
color_1: "#2F1200",
color_2: "#4A1C01",
color_3: "#D86018",
color_4: "#FFE5D5",
color_5: "#FFE5D5",
rgb_1: "rgb(47, 18, 0)",
rgb_2: "rgb(74, 28, 1)",
rgb_4: "rgb(255, 229, 213)",
rgb_5: "rgb(255, 229, 213)"
},

],
[
{
name: "Miracle",
group: "bright",
hex: "#7D2248",
rgb: "rgb(125,34,72)",
cmyk: "0,73,42,51",
pantone: "216C",
color_1: "#330015",
color_2: "#400C22",
color_3: "#7D2248",
color_4: "#F675AB",
color_5: "#FCB5D3",
rgb_1: "rgb(51, 0, 21)",
rgb_2: "rgb(64, 12, 34)",
rgb_4: "rgb(246, 117, 171)",
rgb_5: "rgb(252, 181, 211)"
},
{
name: "Branch",
group: "bright",
hex: "#4E3629",
rgb: "rgb(78,54,41)",
cmyk: "0,31,47,69",
pantone: "476C",
color_1: "#140802",
color_2: "#2A170D",
color_3: "#4E3629",
color_4: "#A08577",
color_5: "#CEC4C0",
rgb_1: "rgb(20, 8, 2)",
rgb_2: "rgb(42, 23, 13)",
rgb_4: "rgb(160, 133, 119)",
rgb_5: "rgb(206, 196, 192)"
},

{
name: "Vine",
group: "bright",
hex: "#4A7729",
rgb: "rgb(74,119,41)",
cmyk: "38,0,66,53",
pantone: "364C",
color_1: "#1E2519",
color_2: "#364D26",
color_3: "#4A7729",
color_4: "#89DF4B",
color_5: "#BAEC97",
rgb_1: "rgb(30, 37, 25)",
rgb_2: "rgb(54, 77, 38)",
rgb_4: "rgb(137, 223, 75)",
rgb_5: "rgb(186, 236, 151)"
},
],
],
brightColorsLabel: "BRIGHT COLORS",
neutralsColors: [
[
{
name: "Black",
hex: "#000",
rgb: "rgb(0, 0, 0)",
color_3: "#000",
},

{
name: "Gray -- Darker",
hex: "#222222",
rgb: "rgb(34, 34, 34)",
color_3: "#222222",
},

{
name: "Gray -- Dark",
hex: "#4a4a4a",
rgb: "rgb(74, 74, 74)",
color_3: "#4a4a4a",
},

{
name: "Gray",
hex: "#717171",
rgb: "rgb(113, 113, 113)",
color_3: "#717171",
}
],
[
{
name: "Gray -- Light",
hex: "#f5f5f5",
rgb: "rgb(249, 249, 249)",
color_3: "#f5f5f5",
},
{
name: "White",
hex: "#ffffff",
rgb: "rgb(255, 255, 255)",
color_3: "#ffffff",
},
]
],
neutralsColorsLabel: "NEUTRALS COLORS"
}

0 comments on commit d4490c1

Please sign in to comment.