Skip to content
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

docs(root): update cards, side navigation and top navigation code examples #639

Merged
merged 1 commit into from
Oct 16, 2023
Merged

docs(root): update cards, side navigation and top navigation code examples #639

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
65 changes: 64 additions & 1 deletion src/content/structured/components/cards/code.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
path: "/components/card/code"

date: "2023-02-03"
date: "2023-10-11"

title: "Card"

Expand All @@ -25,6 +25,7 @@ import {
IcButton,
IcTypography,
SlottedSVG,
IcBadge,
} from "@ukic/react";

export const CardIcon = () => (
Expand Down Expand Up @@ -979,6 +980,68 @@ export const clickableBtn = [
</IcCard>
</ComponentPreview>

### With badge

export const withBadge = [
{
language: "Web component",
snippet: `<ic-card
heading="Card heading"
subheading="Card subheading"
message="This is an example of a clickable card component rendered as a link."
clickable="true"
href="#">
<ic-badge text-label="Brand new" slot="badge" variant="info" size="large"></ic-badge>
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="#000000"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
</svg>
</ic-card>`,
},
{
language: "React",
snippet: `<IcCard
heading="Card heading"
subheading="Card subheading"
message="This is an example of a clickable card component rendered as a link."
clickable
href="#">
<IcBadge size="large" text-label="Brand new" slot="badge" variant="info"/>
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="#000000"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
</SlottedSVG>
</IcCard>`,
},
];

<ComponentPreview snippets={withBadge}>
<IcCard
heading="Card heading"
subheading="Card subheading"
message="This is an example of a clickable card component rendered as a link."
clickable="true"
href="/components/card/code"
>
<IcBadge size="large" text-label="Brand new" slot="badge" variant="info" />
<CardIcon />
</IcCard>
</ComponentPreview>

### Disabled

export const disabled = [
Expand Down
162 changes: 161 additions & 1 deletion src/content/structured/components/side-nav/code.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
path: "/components/side-navigation/code"

date: "2023-07-28"
date: "2023-10-11"

title: "Side navigation"

Expand Down Expand Up @@ -29,6 +29,7 @@ import {
IcDivider,
IcLink,
SlottedSVG,
IcBadge,
} from "@ukic/react";

import {
Expand Down Expand Up @@ -625,6 +626,165 @@ export const snippetsCollapsed = [
</IcSideNavigation>
</ComponentPreview>

### With badges on navigation items

export const snippetsBadge = [
{
language: "Web component",
snippet: `<ic-side-navigation appTitle="ACME coffee shop" version="v0.0.7" status="Alpha">
<svg slot="app-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>coffee-outline</title>
<path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
</svg>
<ic-navigation-item slot="primary-navigation" href="#" label="Home">
<svg xmlns="http://www.w3.org/2000/svg" slot='icon' viewBox="0 0 24 24">
<title>home</title>
<path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
</svg>
</ic-navigation-item>
<ic-divider slot="primary-navigation"></ic-divider>
<ic-navigation-item slot="primary-navigation" href="#" label="Search">
<svg xmlns="http://www.w3.org/2000/svg" slot='icon' viewBox="0 0 24 24">
<title>magnify</title>
<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg>
</ic-navigation-item>
<ic-navigation-item slot="primary-navigation" href="#" label="Drinks">
<ic-badge type="dot" slot="badge" variant="error" position="far" size="large"></ic-badge>
<svg xmlns="http://www.w3.org/2000/svg" slot='icon' viewBox="0 0 24 24">
<title>coffee-outline</title>
<path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
</svg>
</ic-navigation-item>
<ic-navigation-item slot="primary-navigation" href="#" label="Equipment">
<ic-badge type="dot" slot="badge" variant="success" position="far" size="large"></ic-badge>
<svg xmlns="http://www.w3.org/2000/svg" slot='icon' viewBox="0 0 24 24">
<title>coffee-maker-outline</title>
<path d="M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z" />
</svg>
</ic-navigation-item>
<ic-navigation-item slot="secondary-navigation" href="#" label="Settings">
<svg xmlns="http://www.w3.org/2000/svg" slot='icon' viewBox="0 0 24 24">
<title>cog-outline</title>
<path d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z" />
</svg>
</ic-navigation-item>
</ic-side-navigation>`,
},
{
language: "React",
snippet: `<IcSideNavigation appTitle="ACME coffee shop" version="v0.0.7" status="Alpha">
<SlottedSVG slot="app-icon" viewBox="0 0 24 24">
<title>coffee-outline</title>
<path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
</SlottedSVG>
<IcNavigationItem slot="primary-navigation" href="#" label="Home">
<SlottedSVG slot='icon' viewBox="0 0 24 24">
<title>home</title>
<path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
</SlottedSVG>
</IcNavigationItem>
<IcDivider slot="primary-navigation"></IcDivider>
<IcNavigationItem slot="primary-navigation" href="#" label="Search">
<SlottedSVG slot='icon' viewBox="0 0 24 24">
<title>magnify</title>
<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItem slot="primary-navigation" href="#" label="Drinks">
<IcBadge type="dot" slot="badge" variant="error" position="far" size="large"/>
<SlottedSVG slot='icon' viewBox="0 0 24 24">
<title>coffee-outline</title>
<path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItem slot="primary-navigation" href="#" label="Equipment">
<IcBadge type="dot" slot="badge" variant="success" position="far" size="large"/>
<SlottedSVG slot='icon' viewBox="0 0 24 24">
<title>coffee-maker-outline</title>
<path d="M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z" />
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItem slot="secondary-navigation" href="#" label="Settings">
<SlottedSVG slot='icon' viewBox="0 0 24 24">
<title>cog-outline</title>
<path d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z" />
</SlottedSVG>
</IcNavigationItem>
</IcSideNavigation>`,
},
];

<ComponentPreview
snippets={snippetsBadge}
style={{
display: "flex",
height: "100%",
justifyContent: "flex-start",
overflow: "hidden",
position: "relative",
padding: "0px",
}}
>
<IcSideNavigation
appTitle="ACME coffee shop"
version="v0.0.7"
status="Alpha"
disableAutoParentStyling
inline
>
<SlottedSVG slot="app-icon" viewBox="0 0 24 24">
<title>coffee-outline</title>
<path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
</SlottedSVG>
<IcNavigationItem slot="primary-navigation" href="#" label="Home">
<SlottedSVG slot="icon" viewBox="0 0 24 24">
<title>home</title>
<path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
</SlottedSVG>
</IcNavigationItem>
<IcDivider slot="primary-navigation" />
<IcNavigationItem slot="primary-navigation" href="#" label="Search">
<SlottedSVG slot="icon" viewBox="0 0 24 24">
<title>magnify</title>
<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItem slot="primary-navigation" href="#" label="Drinks">
<IcBadge
type="dot"
slot="badge"
variant="error"
position="far"
size="large"
/>
<SlottedSVG slot="icon" viewBox="0 0 24 24">
<title>coffee-outline</title>
<path d="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z" />
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItem slot="primary-navigation" href="#" label="Equipment">
<IcBadge
type="dot"
slot="badge"
variant="success"
position="far"
size="large"
/>
<SlottedSVG slot="icon" viewBox="0 0 24 24">
<title>coffee-maker-outline</title>
<path d="M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z" />
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItem slot="secondary-navigation" href="#" label="Settings">
<SlottedSVG slot="icon" viewBox="0 0 24 24">
<title>cog-outline</title>
<path d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z" />
</SlottedSVG>
</IcNavigationItem>
</IcSideNavigation>
</ComponentPreview>

### With Material Design icons in SlottedSVG

[MDI](https://pictogrammers.com/library/mdi/) can be imported from the `@mdi/js` package and used in `<SlottedSVG>`.
Expand Down
Loading