mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

add custom head component

Browse source
This commit is contained in:
Daniel Miedzik 2021-01-14 16:36:52 +01:00
commit 36d20a5a2f
18 changed files with 727 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

103
COMPONENT_INDEX.md
View file

@ -1,6 +1,6 @@
# Component Index
> 155 components exported from carbon-components-svelte@0.26.0.
> 160 components exported from carbon-components-svelte@0.26.0.
## Components
@ -46,6 +46,11 @@
- [`FormItem`](#formitem)
- [`FormLabel`](#formlabel)
- [`Grid`](#grid)
- [`Head`](#head)
- [`HeadAction`](#headaction)
- [`HeadActions`](#headactions)
- [`HeadFilters`](#headfilters)
- [`HeadIdentity`](#headidentity)
- [`Header`](#header)
- [`HeaderAction`](#headeraction)
- [`HeaderActionLink`](#headeractionlink)
@ -1350,6 +1355,102 @@ None.
None.
## `Head`
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------ | :--------------- | :------- | :-------------------------------------- | -------------------------- | --------------------------------- |
| flexDirection | <code>let</code> | No | <code>"row" &#124; "row-reverse"</code> | <code>'row'</code> | Set the flexDirection of the head |
| margin | <code>let</code> | No | <code>string</code> | <code>'20px 0 15px'</code> | Set the margin of the head |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
### Events
None.
## `HeadAction`
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------- | :--------------- | :------- | :----------------------------------------------------------- | ------------- | ----------------------------------------------------- |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the href attribute |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| description | <code>let</code> | No | <code>string</code> | -- | Specify the description |
### Slots
None.
### Events
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| click | forwarded | -- |
## `HeadActions`
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :------------------ | ------------------- | --------------------------------- |
| width | <code>let</code> | No | <code>string</code> | <code>"100%"</code> | Set the width of the head actions |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
### Events
None.
## `HeadFilters`
### Props
None.
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
### Events
None.
## `HeadIdentity`
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :-------------------------------------------------- | --------------------- | ------------------------------ |
| title | <code>let</code> | No | <code>string</code> | -- | Specify the href attribute |
| subtitle | <code>let</code> | No | <code>string</code> | -- | Specify the subtitle attribute |
| imgSrc | <code>let</code> | No | <code>string</code> | -- | Specify the imgSrc attribute |
| imgSize | <code>let</code> | No | <code>"small" &#124; "normal" &#124; "large"</code> | <code>'normal'</code> | Set the imgSize of the head |
| titleSize | <code>let</code> | No | <code>"small" &#124; "normal" &#124; "large"</code> | <code>'normal'</code> | Set the titleSize of the head |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
| tabs | No | -- | -- |
### Events
None.
## `Header`
### Props

153
docs/src/COMPONENT_API.json
View file

@ -1,5 +1,5 @@
{
"total": 155,
"total": 160,
"components": [
{
"moduleName": "SkeletonText",
@ -4910,6 +4910,157 @@
],
"rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "Head",
"filePath": "/src/Head/Head.svelte",
"props": [
{
"name": "flexDirection",
"kind": "let",
"description": "Set the flexDirection of the head",
"type": "\"row\" | \"row-reverse\"",
"value": "'row'",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "margin",
"kind": "let",
"description": "Set the margin of the head",
"type": "string",
"value": "'20px 0 15px'",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [],
"typedefs": []
},
{
"moduleName": "HeadAction",
"filePath": "/src/Head/HeadAction.svelte",
"props": [
{
"name": "href",
"kind": "let",
"description": "Specify the href attribute",
"type": "string",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "description",
"kind": "let",
"description": "Specify the description",
"type": "string",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [],
"events": [{ "type": "forwarded", "name": "click", "element": "Button" }],
"typedefs": []
},
{
"moduleName": "HeadActions",
"filePath": "/src/Head/HeadActions.svelte",
"props": [
{
"name": "width",
"kind": "let",
"description": "Set the width of the head actions",
"type": "string",
"value": "\"100%\"",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [],
"typedefs": []
},
{
"moduleName": "HeadFilters",
"filePath": "/src/Head/HeadFilters.svelte",
"props": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [],
"typedefs": []
},
{
"moduleName": "HeadIdentity",
"filePath": "/src/Head/HeadIdentity.svelte",
"props": [
{
"name": "title",
"kind": "let",
"description": "Specify the href attribute",
"type": "string",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "subtitle",
"kind": "let",
"description": "Specify the subtitle attribute",
"type": "string",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "imgSrc",
"kind": "let",
"description": "Specify the imgSrc attribute",
"type": "string",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "imgSize",
"kind": "let",
"description": "Set the imgSize of the head",
"type": "\"small\" | \"normal\" | \"large\"",
"value": "'normal'",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "titleSize",
"kind": "let",
"description": "Set the titleSize of the head",
"type": "\"small\" | \"normal\" | \"large\"",
"value": "'normal'",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" },
{ "name": "tabs", "default": false, "slot_props": "{}" }
],
"events": [],
"typedefs": []
},
{
"moduleName": "IconSkeleton",
"filePath": "/src/Icon/IconSkeleton.svelte",

16
docs/src/pages/_layout.svelte
View file

@ -23,10 +23,12 @@
let innerWidth = 2048;
$: isMobile = innerWidth < 1056;
console.log("$layout", $layout);
$: components = $layout.children.filter(
(child) => child.title === "components"
)[0];
$: recipes = $layout.children.filter((child) => child.title === "recipes")[0];
$: avui = $layout.children.filter((child) => child.title === "avui")[0];
$beforeUrlChange(() => {
if (isMobile) isSideNavOpen = false;
@ -217,7 +219,19 @@
<SideNav bind:isOpen="{isSideNavOpen}">
<SideNavItems>
<SideNavMenu
expanded="{$isActive($url('')) || $isActive($url('/components'))}"
expanded="{$isActive($url('')) || $isActive($url('/avui'))}"
text="avUI Components"
>
{#each avui.children as child, i (child.path)}
<SideNavMenuItem
text="{child.title}"
href="{$url(child.path)}"
isSelected="{$isActive($url(child.path))}"
/>
{/each}
</SideNavMenu>
<SideNavMenu
expanded="{$isActive($url('/components'))}"
text="Components"
>
{#each components.children as child, i (child.path)}

78
docs/src/pages/avui/Head.svx Normal file
View file

@ -0,0 +1,78 @@
---
layout: "avui"
components: ["Head", "HeadIdentity", "HeadActions", "HeadFilters", "HeadAction"]
---
<script>
import { Head, HeadAction, HeadActions, HeadFilters, HeadIdentity, Select, SelectItem, Search } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
import CloudUpload32 from "carbon-icons-svelte/lib/CloudUpload32";
import Add32 from "carbon-icons-svelte/lib/Add32";
import Close32 from "carbon-icons-svelte/lib/Close32";
</script>
The `Head` component
### Head with identity, filters and actions
<Head>
<HeadIdentity title="Test title" subtitle="Test subtitle" imgSrc="https://via.placeholder.com/200x200" />
<HeadActions>
<HeadFilters>
<Select inline selected="All" noLabel={true}>
<SelectItem value="All" text="All Statuses" />
<SelectItem value="Active" text="Active" />
<SelectItem value="Archive" text="Archive" />
<SelectItem value="Published" text="Published" />
</Select>
</HeadFilters>
<Search light placeholder="What can we help you find?" />
<HeadAction icon={CloudUpload32} description="Upload assets" />
<HeadAction href="/#/add" icon={Add32} description="Add Project" />
</HeadActions>
</Head>
<Head>
<HeadIdentity title="Test title" subtitle="Test subtitle" imgSrc="https://via.placeholder.com/200x200" />
<HeadActions width="unset">
<HeadAction href="/#/add" icon={Close32} description="Add Project" />
</HeadActions>
</Head>
### Head with Identity only (title, subtitle and image)
<Head>
<HeadIdentity title="Test title" subtitle="Test subtitle" imgSrc="https://via.placeholder.com/200x200" />
</Head>
### Sizes
Small size:
<Head>
<HeadIdentity title="Test title" titleSize="small" imgSrc="https://via.placeholder.com/200x200" imgSize="small" />
</Head>
Large size:
<Head>
<HeadIdentity title="Test title" titleSize="large" subtitle="Test subtitle" imgSrc="https://via.placeholder.com/200x200" imgSize="large" />
</Head>
### Head without Identity
<Head>
<HeadActions>
<HeadFilters>
<Select inline selected="All" noLabel={true}>
<SelectItem value="All" text="All Statuses" />
<SelectItem value="Active" text="Active" />
<SelectItem value="Archive" text="Archive" />
<SelectItem value="Published" text="Published" />
</Select>
</HeadFilters>
<Search light placeholder="What can we help you find?" />
<HeadAction icon={CloudUpload32} description="Upload assets" />
<HeadAction href="/#/add" icon={Add32} description="Add Project" />
</HeadActions>
</Head>

1
docs/svelte.config.js
View file

@ -144,6 +144,7 @@ module.exports = {
remarkPlugins: [plugin, slug, carbonify],
layout: {
recipe: path.join(__dirname, "src/layouts/Recipe.svelte"),
avui: path.join(__dirname, "src/layouts/ComponentLayout.svelte"),
_: path.join(__dirname, "src/layouts/ComponentLayout.svelte"),
},
}),

49
src/Head/Head.svelte Normal file
View file

@ -0,0 +1,49 @@
<script>
import Row from "../Grid/Row.svelte";
import Column from "../Grid/Column.svelte";
/**
* Set the flexDirection of the head
* @type {"row" | "row-reverse"}
*/
export let flexDirection = "row";
/** Set the margin of the head */
export let margin = "20px 0 15px";
</script>
<style>
#header {
display: flex;
flex-direction: var(--flex-direction);
justify-content: space-between;
margin: var(--margin);
}
</style>
<svelte:head>
<style lang="scss">
#header-filters {
.bx--select-input__wrapper {
margin-right: 10px;
select.bx--select-input {
width: unset;
min-width: 95px;
max-width: 125px;
padding-right: 30px;
}
}
}
</style>
</svelte:head>
<Row>
<Column>
<div
id="header"
style="--flex-direction: {flexDirection}; --margin: {margin}"
>
<slot />
</div>
</Column>
</Row>

33
src/Head/HeadAction.svelte Normal file
View file

@ -0,0 +1,33 @@
<script>
import Button from "../Button/Button.svelte";
/**
* Specify the href attribute
* @type {string}
*/
export let href = undefined;
/**
* Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/
export let icon = undefined;
/**
* Specify the description
* @type {string}
*/
export let description = undefined;
</script>
<Button
class="header-action"
href="{href}"
icon="{icon}"
hasIconOnly
iconDescription="{description}"
tooltipPosition="bottom"
tooltipAlignment="center"
kind="secondary"
on:click
/>

25
src/Head/HeadActions.svelte Normal file
View file

@ -0,0 +1,25 @@
<script>
/** Set the width of the head actions */
export let width = "100%";
</script>
<style>
#header-actions {
display: flex;
height: 47px;
margin: auto 0 0;
width: var(--width);
/* .header-action {
margin-right: 3px;
}
:last-child {
margin-right: 0px;
} */
}
</style>
<div id="header-actions" style="--width: {width}">
<slot />
</div>

12
src/Head/HeadFilters.svelte Normal file
View file

@ -0,0 +1,12 @@
<style lang="scss">
#header-filters {
display: flex;
margin-top: 5px;
margin-right: 50px;
font-size: 13px;
}
</style>
<div id="header-filters">
<slot />
</div>

123
src/Head/HeadIdentity.svelte Normal file
View file

@ -0,0 +1,123 @@
<script>
/**
* Specify the href attribute
* @type {string}
*/
export let title = undefined;
/**
* Specify the subtitle attribute
* @type {string}
*/
export let subtitle = undefined;
/**
* Specify the imgSrc attribute
* @type {string}
*/
export let imgSrc = undefined;
/**
* Set the imgSize of the head
* @type {"small" | "normal" | "large"}
*/
export let imgSize = "normal";
/**
* Set the titleSize of the head
* @type {"small" | "normal" | "large"}
*/
export let titleSize = "normal";
let imgSizeValue;
let titleSizeValue;
switch (imgSize) {
case "small":
imgSizeValue = "0.75";
break;
case "normal":
imgSizeValue = "1";
break;
case "large":
imgSizeValue = "1.5";
break;
}
switch (titleSize) {
case "small":
titleSizeValue = "1rem";
break;
case "normal":
titleSizeValue = "1.5rem";
break;
case "large":
titleSizeValue = "2rem";
break;
}
</script>
<style lang="scss">
@import "@carbon/type/scss/styles";
#header-identity {
display: flex;
width: 100%;
}
#header-identity-img {
width: calc(20% * var(--img-size-multiply));
min-width: calc(70px * var(--img-size-multiply));
max-width: calc(100px * var(--img-size-multiply));
background-size: cover;
background-image: var(--img-src), url("https://via.placeholder.com/200x200");
margin-right: 15px;
}
#header-texts {
margin: auto 0;
}
h1 {
@include carbon--type-style("expressive-heading-06");
font-size: var(--title-size);
font-weight: bold;
letter-spacing: -0.09rem;
margin-right: 50px;
}
span#subtitle {
@include carbon--type-style("expressive-heading-02");
font-weight: 400;
display: block;
}
#header-tabs {
min-width: 330px;
}
</style>
<div id="header-identity">
{#if imgSrc}
<div
id="header-identity-img"
class="bx--aspect-ratio bx--aspect-ratio--1x1"
style="{`--img-size-multiply: ${imgSizeValue}; --img-src: url('${imgSrc}')`}"
></div>
{/if}
{#if title || subtitle}
<div id="header-texts">
{#if title}
<h1 style="{`--title-size: ${titleSizeValue}`}">{title}</h1>
{/if}
{#if subtitle}<span id="subtitle">{subtitle}</span>{/if}
<slot />
</div>
{/if}
{#if $$slots.tabs}
<div id="header-tabs">
<slot name="tabs" />
</div>
{/if}
</div>

5
src/Head/index.js Normal file
View file

@ -0,0 +1,5 @@
export { default as Head } from "./Head.svelte";
export { default as HeadAction } from "./HeadAction.svelte";
export { default as HeadActions } from "./HeadActions.svelte";
export { default as HeadFilters } from "./HeadFilters.svelte";
export { default as HeadIdentity } from "./HeadIdentity.svelte";

7
src/index.js
View file

@ -47,6 +47,13 @@ export { FormGroup } from "./FormGroup";
export { FormItem } from "./FormItem";
export { FormLabel } from "./FormLabel";
export { Grid, Row, Column } from "./Grid";
export {
Head,
HeadAction,
HeadActions,
HeadFilters,
HeadIdentity,
} from "./Head";
export { Icon, IconSkeleton } from "./Icon";
export { InlineLoading } from "./InlineLoading";
export { Link } from "./Link";

24
types/Head/Head.d.ts vendored Normal file
View file

@ -0,0 +1,24 @@
/// <reference types="svelte" />
export interface HeadProps {
/**
* Set the flexDirection of the head
* @default 'row'
*/
flexDirection?: "row" | "row-reverse";
/**
* Set the margin of the head
* @default '20px 0 15px'
*/
margin?: string;
}
export default class Head {
$$prop_def: HeadProps;
$$slot_def: {
default: {};
};
$on(eventname: string, cb: (event: Event) => void): () => void;
}

26
types/Head/HeadAction.d.ts vendored Normal file
View file

@ -0,0 +1,26 @@
/// <reference types="svelte" />
export interface HeadActionProps {
/**
* Specify the href attribute
*/
href?: string;
/**
* Specify the icon from `carbon-icons-svelte` to render
*/
icon?: typeof import("carbon-icons-svelte").CarbonIcon;
/**
* Specify the description
*/
description?: string;
}
export default class HeadAction {
$$prop_def: HeadActionProps;
$$slot_def: {};
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void;
}

18
types/Head/HeadActions.d.ts vendored Normal file
View file

@ -0,0 +1,18 @@
/// <reference types="svelte" />
export interface HeadActionsProps {
/**
* Set the width of the head actions
* @default "100%"
*/
width?: string;
}
export default class HeadActions {
$$prop_def: HeadActionsProps;
$$slot_def: {
default: {};
};
$on(eventname: string, cb: (event: Event) => void): () => void;
}

12
types/Head/HeadFilters.d.ts vendored Normal file
View file

@ -0,0 +1,12 @@
/// <reference types="svelte" />
export interface HeadFiltersProps {}
export default class HeadFilters {
$$prop_def: HeadFiltersProps;
$$slot_def: {
default: {};
};
$on(eventname: string, cb: (event: Event) => void): () => void;
}

40
types/Head/HeadIdentity.d.ts vendored Normal file
View file

@ -0,0 +1,40 @@
/// <reference types="svelte" />
export interface HeadIdentityProps {
/**
* Specify the href attribute
*/
title?: string;
/**
* Specify the subtitle attribute
*/
subtitle?: string;
/**
* Specify the imgSrc attribute
*/
imgSrc?: string;
/**
* Set the imgSize of the head
* @default 'normal'
*/
imgSize?: "small" | "normal" | "large";
/**
* Set the titleSize of the head
* @default 'normal'
*/
titleSize?: "small" | "normal" | "large";
}
export default class HeadIdentity {
$$prop_def: HeadIdentityProps;
$$slot_def: {
default: {};
tabs: {};
};
$on(eventname: string, cb: (event: Event) => void): () => void;
}

5
types/index.d.ts vendored
View file

@ -70,6 +70,11 @@ export { default as FormLabel } from "./FormLabel/FormLabel";
export { default as Grid } from "./Grid/Grid";
export { default as Row } from "./Grid/Row";
export { default as Column } from "./Grid/Column";
export { default as Head } from "./Head/Head";
export { default as HeadAction } from "./Head/HeadAction";
export { default as HeadActions } from "./Head/HeadActions";
export { default as HeadFilters } from "./Head/HeadFilters";
export { default as HeadIdentity } from "./Head/HeadIdentity";
export { default as IconSkeleton } from "./Icon/IconSkeleton";
export { default as Icon } from "./Icon/Icon";
export { default as InlineLoading } from "./InlineLoading/InlineLoading";