diff --git a/src/components/Icons/Arrow2/Arrow2.astro b/src/components/Icons/Arrow2/Arrow2.astro new file mode 100644 index 0000000..f59ab9e --- /dev/null +++ b/src/components/Icons/Arrow2/Arrow2.astro @@ -0,0 +1,45 @@ +--- +import arrow16down from './svgs/arrow2-16-down.svg?raw'; +import arrow16left from './svgs/arrow2-16-left.svg?raw'; +import arrow16right from './svgs/arrow2-16-right.svg?raw'; +import arrow16up from './svgs/arrow2-16-up.svg?raw'; +import arrow24down from './svgs/arrow2-24-down.svg?raw'; +import arrow24left from './svgs/arrow2-24-left.svg?raw'; +import arrow24right from './svgs/arrow2-24-right.svg?raw'; +import arrow24up from './svgs/arrow2-24-up.svg?raw'; +import arrow32down from './svgs/arrow2-32-down.svg?raw'; +import arrow32left from './svgs/arrow2-32-left.svg?raw'; +import arrow32right from './svgs/arrow2-32-right.svg?raw'; +import arrow32up from './svgs/arrow2-32-up.svg?raw'; + +export interface Props { + size: 16 | 24 | 32; + orientation: 'up' | 'down' | 'left' | 'right'; + label?: string; + class?: string; +} + +const { size = 24, orientation = 'down', label, class: className } = Astro.props; + +let raw: string; +if (size === 16 && orientation === 'down') raw = arrow16down; +else if (size === 16 && orientation === 'left') raw = arrow16left; +else if (size === 16 && orientation === 'right') raw = arrow16right; +else if (size === 16 && orientation === 'up') raw = arrow16up; +else if (size === 24 && orientation === 'down') raw = arrow24down; +else if (size === 24 && orientation === 'left') raw = arrow24left; +else if (size === 24 && orientation === 'right') raw = arrow24right; +else if (size === 24 && orientation === 'up') raw = arrow24up; +else if (size === 32 && orientation === 'down') raw = arrow32down; +else if (size === 32 && orientation === 'left') raw = arrow32left; +else if (size === 32 && orientation === 'right') raw = arrow32right; +else if (size === 32 && orientation === 'up') raw = arrow32up; +else raw = ''; // Fallback to a blank string if no match is found, though this should not happen due to the type constraints on size and orientation. + +const classes = ['nds-icon-arrow2', className].filter(Boolean).join(' '); +const svg = raw + .replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"') + .replace(' diff --git a/src/components/Icons/Arrow2/svgs/arrow2-16-down.svg b/src/components/Icons/Arrow2/svgs/arrow2-16-down.svg new file mode 100644 index 0000000..1bdfc49 --- /dev/null +++ b/src/components/Icons/Arrow2/svgs/arrow2-16-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icons/Arrow2/svgs/arrow2-16-left.svg b/src/components/Icons/Arrow2/svgs/arrow2-16-left.svg new file mode 100644 index 0000000..87e95be --- /dev/null +++ b/src/components/Icons/Arrow2/svgs/arrow2-16-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icons/Arrow2/svgs/arrow2-16-right.svg b/src/components/Icons/Arrow2/svgs/arrow2-16-right.svg new file mode 100644 index 0000000..8860c9e --- /dev/null +++ b/src/components/Icons/Arrow2/svgs/arrow2-16-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icons/Arrow2/svgs/arrow2-16-up.svg b/src/components/Icons/Arrow2/svgs/arrow2-16-up.svg new file mode 100644 index 0000000..da0c790 --- /dev/null +++ b/src/components/Icons/Arrow2/svgs/arrow2-16-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icons/Arrow2/svgs/arrow2-24-down.svg b/src/components/Icons/Arrow2/svgs/arrow2-24-down.svg new file mode 100644 index 0000000..29408ca --- /dev/null +++ b/src/components/Icons/Arrow2/svgs/arrow2-24-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icons/Arrow2/svgs/arrow2-24-left.svg b/src/components/Icons/Arrow2/svgs/arrow2-24-left.svg new file mode 100644 index 0000000..233dc36 --- /dev/null +++ b/src/components/Icons/Arrow2/svgs/arrow2-24-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icons/Arrow2/svgs/arrow2-24-right.svg b/src/components/Icons/Arrow2/svgs/arrow2-24-right.svg new file mode 100644 index 0000000..5d7119d --- /dev/null +++ b/src/components/Icons/Arrow2/svgs/arrow2-24-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icons/Arrow2/svgs/arrow2-24-up.svg b/src/components/Icons/Arrow2/svgs/arrow2-24-up.svg new file mode 100644 index 0000000..694c631 --- /dev/null +++ b/src/components/Icons/Arrow2/svgs/arrow2-24-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icons/Arrow2/svgs/arrow2-32-down.svg b/src/components/Icons/Arrow2/svgs/arrow2-32-down.svg new file mode 100644 index 0000000..5af9d27 --- /dev/null +++ b/src/components/Icons/Arrow2/svgs/arrow2-32-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icons/Arrow2/svgs/arrow2-32-left.svg b/src/components/Icons/Arrow2/svgs/arrow2-32-left.svg new file mode 100644 index 0000000..f4edb48 --- /dev/null +++ b/src/components/Icons/Arrow2/svgs/arrow2-32-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icons/Arrow2/svgs/arrow2-32-right.svg b/src/components/Icons/Arrow2/svgs/arrow2-32-right.svg new file mode 100644 index 0000000..7f56218 --- /dev/null +++ b/src/components/Icons/Arrow2/svgs/arrow2-32-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icons/Arrow2/svgs/arrow2-32-up.svg b/src/components/Icons/Arrow2/svgs/arrow2-32-up.svg new file mode 100644 index 0000000..bf95c83 --- /dev/null +++ b/src/components/Icons/Arrow2/svgs/arrow2-32-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icons/index.ts b/src/components/Icons/index.ts new file mode 100644 index 0000000..c083b12 --- /dev/null +++ b/src/components/Icons/index.ts @@ -0,0 +1,2 @@ +export { default as Arrow2 } from './Arrow2/Arrow2.astro'; +export { default as Profile } from './profile/profile.astro'; \ No newline at end of file diff --git a/src/components/Icons/profile/profile.astro b/src/components/Icons/profile/profile.astro new file mode 100644 index 0000000..d24a111 --- /dev/null +++ b/src/components/Icons/profile/profile.astro @@ -0,0 +1,28 @@ +--- +import profile16 from './svgs/profile-16.svg?raw'; +import profile24 from './svgs/profile-24.svg?raw'; +import profile32 from './svgs/profile-32.svg?raw'; + +export interface Props { + size?: 16 | 24 | 32; + orientation?: 'up' | 'down' | 'left' | 'right'; + label?: string; + class?: string; +} + +const { size = 24, label, class: className } = Astro.props; + +let raw: string; +if (size === 16 ) raw = profile16; +else if (size === 24 ) raw = profile24; +else if (size === 32 ) raw = profile32; +else raw = ''; // Fallback to a blank string if no match is found, though this should not happen due to the type constraints on size. + + +const classes = ['nds-icon-profile', className].filter(Boolean).join(' '); +const svg = raw + .replace(/fill="#[A-Fa-f0-9]{3,8}"/g, 'fill="currentColor"') + .replace(' diff --git a/src/components/Icons/profile/svgs/profile-16.svg b/src/components/Icons/profile/svgs/profile-16.svg new file mode 100644 index 0000000..5782b62 --- /dev/null +++ b/src/components/Icons/profile/svgs/profile-16.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icons/profile/svgs/profile-24.svg b/src/components/Icons/profile/svgs/profile-24.svg new file mode 100644 index 0000000..e3f9c55 --- /dev/null +++ b/src/components/Icons/profile/svgs/profile-24.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icons/profile/svgs/profile-32.svg b/src/components/Icons/profile/svgs/profile-32.svg new file mode 100644 index 0000000..c4c42ad --- /dev/null +++ b/src/components/Icons/profile/svgs/profile-32.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/index.ts b/src/components/index.ts new file mode 100644 index 0000000..0dd518a --- /dev/null +++ b/src/components/index.ts @@ -0,0 +1,3 @@ +// Auto-generated by scripts/generate-barrel.mjs — do not edit manually. + +export * from './Icons/index.ts'; diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..9edf82f --- /dev/null +++ b/src/index.ts @@ -0,0 +1 @@ +export * from './components/index.ts'; diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index f6b55d4..d7d096b 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,12 +1,15 @@ +--- +import '../styles/index.scss'; +--- + - - Astro Basics + Nova Design System @@ -18,6 +21,9 @@ body { margin: 0; width: 100%; - height: 100%; + min-height: 100%; + font-family: var(--nds-font-family-base); + background-color: var(--nds-page-low); + color: var(--nds-default); } diff --git a/src/pages/index.astro b/src/pages/index.astro index c04f360..bc31e58 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,11 +1,180 @@ --- -import Welcome from '../components/Welcome.astro'; import Layout from '../layouts/Layout.astro'; - -// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build -// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh. +import { Arrow2, Profile } from '../components/Icons/index.ts'; --- - +
+

Nova Design System

+
+

Icon — 16 / 24 / 32

+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + +
+
+
+
+ + + + +
+ + + + +
+
+ + + + +
+ + + + + + diff --git a/src/styles/index.scss b/src/styles/index.scss new file mode 100644 index 0000000..d047fc6 --- /dev/null +++ b/src/styles/index.scss @@ -0,0 +1,10 @@ +@use 'tokens/colors'; +@use 'tokens/typography'; +@use 'tokens/spacing'; + +// Global reset (opt-in) +*, +*::before, +*::after { + box-sizing: border-box; +}