Kaloyan/prestashop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Subida del módulo y tema de PrestaShop

Browse Source
This commit is contained in:
Kaloyan
2026-04-09 18:31:51 +02:00
parent 12c253296f
commit 16b3ff9424
39262 changed files with 7418797 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
themes/hummingbird/stories/ui/alerts/additional.html Normal file
View File

@@ -0,0 +1,13 @@
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
<div class="alert alert-primary" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

24
themes/hummingbird/stories/ui/alerts/basics.html Normal file
View File

@@ -0,0 +1,24 @@
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

24
themes/hummingbird/stories/ui/alerts/icons.html Normal file
View File

@@ -0,0 +1,24 @@
<div class="alert alert-primary d-flex align-items-center" role="alert">
<i class="material-icons me-2">information</i>
<div>
An example alert with an icon
</div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
<i class="material-icons me-2">check</i>
<div>
An example success alert with an icon
</div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
<i class="material-icons me-2">warning</i>
<div>
An example warning alert with an icon
</div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
<i class="material-icons me-2">error</i>
<div>
An example danger alert with an icon
</div>
</div>

41
themes/hummingbird/stories/ui/alerts/index.stories.js Normal file
View File

@@ -0,0 +1,41 @@
import basicsContent from './basics.html'
import additionalContent from './additional.html'
import iconsContent from './icons.html'
export default {
title: 'UI/Alerts',
parameters: {
docs: {
description: {
component: 'These alerts are used to display messages.'
}
}
}
};
export const Basics = () => basicsContent;
Basics.parameters = {
docs: {
source: {
code: basicsContent
}
}
};
export const Additional = () => additionalContent;
Additional.parameters = {
docs: {
source: {
code: additionalContent
}
}
};
export const WithIcons = () => iconsContent;
WithIcons.parameters = {
docs: {
source: {
code: iconsContent
}
}
};

8
themes/hummingbird/stories/ui/badges/badges.html Normal file
View File

@@ -0,0 +1,8 @@
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

44
themes/hummingbird/stories/ui/badges/index.stories.js Normal file
View File

@@ -0,0 +1,44 @@
import badgesContent from './badges.html'
import pillsContent from './pills.html'
import notificationsContent from './notifications.html'
export default {
title: 'UI/Badges',
parameters: {
docs: {
description: {
component: 'Badges are used to display status, counts, or labels.'
}
}
}
};
export const Badges = () => badgesContent;
Badges.parameters = {
docs: {
source: {
code: badgesContent
}
}
};
Badges.storyName = 'Badges';
export const Pills = () => pillsContent;
Pills.parameters = {
docs: {
source: {
code: pillsContent
}
}
};
Pills.storyName = 'Pills';
export const Notifications = () => notificationsContent;
Notifications.parameters = {
docs: {
source: {
code: notificationsContent
}
}
};
Notifications.storyName = 'Notifications pills';

16
themes/hummingbird/stories/ui/badges/notifications.html Normal file
View File

@@ -0,0 +1,16 @@
<div class="py-3">
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 py-1 px-1 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>
<button type="button" class="btn btn-primary position-relative mx-4">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</button>
</div>

8
themes/hummingbird/stories/ui/badges/pills.html Normal file
View File

@@ -0,0 +1,8 @@
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

8
themes/hummingbird/stories/ui/breadcrumb/breadcrumb.html Normal file
View File

@@ -0,0 +1,8 @@
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item"><a href="#">Data</a></li>
<li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
</ol>
</nav>

21
themes/hummingbird/stories/ui/breadcrumb/index.stories.js Normal file
View File

@@ -0,0 +1,21 @@
import breadcrumbContent from './breadcrumb.html';
export default {
title: 'UI/Breadcrumb',
parameters: {
docs: {
description: {
component: 'Breadcrumbs are used to show the current page location within a navigational hierarchy.'
}
}
}
};
export const Breadcrumb = () => breadcrumbContent;
Breadcrumb.parameters = {
docs: {
source: {
code: breadcrumbContent
}
}
};

51
themes/hummingbird/stories/ui/buttons/anchor.html Normal file
View File

@@ -0,0 +1,51 @@
<a href="#" class="btn btn-primary">This is a link</a>
<a href="#" class="btn btn-primary"
><i class="material-icons">ac_unit</i> This is a link</a
>
<br /><br />
<div class="row">
<div class="col col-sm-4">
<button type="button" class="btn btn-primary btn-block btn-sm">
Small block level button
</button>
<button type="button" class="btn btn-outline-primary btn-block btn-sm">
Small block level button
</button>
<button type="button" class="btn btn-secondary btn-block btn-sm">
Small block level button
</button>
<button type="button" class="btn btn-outline-secondary btn-block btn-sm">
Small block level button
</button>
</div>
<div class="col col-sm-4">
<button type="button" class="btn btn-primary btn-block">
Normal block level button
</button>
<button type="button" class="btn btn-outline-primary btn-block">
Normal block level button
</button>
<button type="button" class="btn btn-secondary btn-block">
Normal block level button
</button>
<button type="button" class="btn btn-outline-secondary btn-block">
Normal block level button
</button>
</div>
<div class="col col-sm-4">
<button type="button" class="btn btn-primary btn-block btn-lg">
Large block level button
</button>
<button type="button" class="btn btn-outline-primary btn-block btn-lg">
Large block level button
</button>
<button type="button" class="btn btn-secondary btn-block btn-lg">
Large block level button
</button>
<button type="button" class="btn btn-outline-secondary btn-block btn-lg">
Large block level button
</button>
</div>
</div>

9
themes/hummingbird/stories/ui/buttons/basics.html Normal file
View File

@@ -0,0 +1,9 @@
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

4
themes/hummingbird/stories/ui/buttons/disabled.html Normal file
View File

@@ -0,0 +1,4 @@
<button type="button" class="btn btn-primary" disabled>Disabled</button>
<button type="button" class="btn btn-outline-primary" disabled>
Disabled
</button>

10
themes/hummingbird/stories/ui/buttons/group-radio.html Normal file
View File

@@ -0,0 +1,10 @@
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

11
themes/hummingbird/stories/ui/buttons/group.html Normal file
View File

@@ -0,0 +1,11 @@
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>

113
themes/hummingbird/stories/ui/buttons/index.stories.js Normal file
View File

@@ -0,0 +1,113 @@
import basicsContent from './basics.html'
import outlineContent from './outline.html'
import disabledContent from './disabled.html'
import sizesContent from './sizes.html'
import transparentContent from './transparent.html'
import anchorContent from './anchor.html'
import withIconsContent from './with-icons.html'
import groupContent from './group.html'
import groupRadioContent from './group-radio.html'
export default {
title: 'UI/Buttons',
parameters: {
docs: {
description: {
component: 'Buttons are used to trigger actions in forms, dialogs, and more.'
}
}
}
};
export const Basics = () => basicsContent;
Basics.parameters = {
docs: {
source: {
code: basicsContent
},
description: {
story: 'Some basic buttons'
}
}
};
export const Outline = () => outlineContent;
Outline.parameters = {
docs: {
source: {
code: outlineContent
}
}
};
export const Disabled = () => disabledContent;
Disabled.parameters = {
docs: {
source: {
code: disabledContent
},
description: {
story: 'Every buttons have this style when they\'re disabled.'
}
}
};
export const Sizes = () => sizesContent;
Sizes.parameters = {
docs: {
source: {
code: sizesContent
},
description: {
story: 'You are able to use different sizes of buttons'
}
}
};
export const Transparent = () => transparentContent;
Transparent.parameters = {
docs: {
source: {
code: transparentContent
}
}
};
export const Anchor = () => anchorContent;
Anchor.parameters = {
docs: {
source: {
code: anchorContent
}
}
};
export const WithIcons = () => withIconsContent;
WithIcons.parameters = {
docs: {
source: {
code: withIconsContent
}
}
};
WithIcons.storyName = 'Buttons with icons';
export const Group = () => groupContent;
Group.parameters = {
docs: {
source: {
code: groupContent
}
}
};
Group.storyName = 'Button group';
export const GroupRadio = () => groupRadioContent;
GroupRadio.parameters = {
docs: {
source: {
code: groupRadioContent
}
}
};
GroupRadio.storyName = 'Button group with radio buttons';

5
themes/hummingbird/stories/ui/buttons/outline.html Normal file
View File

@@ -0,0 +1,5 @@
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>

24
themes/hummingbird/stories/ui/buttons/sizes.html Normal file
View File

@@ -0,0 +1,24 @@
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary">Normal button</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary">Normal button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
<br /><br />
<button type="button" class="btn btn-outline-primary btn-sm">
Small button
</button>
<button type="button" class="btn btn-outline-primary">Normal button</button>
<button type="button" class="btn btn-outline-primary btn-lg">
Large button
</button>
<button type="button" class="btn btn-outline-secondary btn-lg">
Large button
</button>
<button type="button" class="btn btn-outline-secondary">Normal button</button>
<button type="button" class="btn btn-outline-secondary btn-sm">
Small button
</button>

4
themes/hummingbird/stories/ui/buttons/transparent.html Normal file
View File

@@ -0,0 +1,4 @@
<button type="button" class="btn btn-text">This is a button</button>
<button type="button" class="btn btn-text">
<i class="material-icons">ac_unit</i> Button with icon
</button>

70
themes/hummingbird/stories/ui/buttons/with-icons.html Normal file
View File

@@ -0,0 +1,70 @@
<button type="button" class="btn btn-primary" aria-label="Iceberg">
<i class="material-icons">vertical_align_bottom</i> Iceberg
</button>
<button type="button" class="btn btn-outline-primary" aria-label="Iceberg">
<i class="material-icons">vertical_align_bottom</i> Iceberg
</button>
<button type="button" class="btn btn-secondary" aria-label="Iceberg">
<i class="material-icons">vertical_align_bottom</i> Iceberg
</button>
<button type="button" class="btn btn-outline-secondary" aria-label="Iceberg">
<i class="material-icons">vertical_align_bottom</i> Iceberg
</button>
<button type="button" class="btn btn-primary" aria-label="Iceberg" disabled>
Iceberg <i class="material-icons">vertical_align_bottom</i>
</button>
<button
type="button"
class="btn btn-outline-primary"
aria-label="Iceberg"
disabled
>
Iceberg <i class="material-icons">vertical_align_bottom</i>
</button>
<br /><br />
<button type="button" class="btn btn-primary btn-lg">
<i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
</button>
<button type="button" class="btn btn-primary">
<i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
</button>
<button type="button" class="btn btn-primary btn-sm">
<i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
</button>
<br /><br />
<button type="button" class="btn btn-outline-primary btn-sm">
<i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
</button>
<button type="button" class="btn btn-outline-primary">
<i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
</button>
<button type="button" class="btn btn-outline-primary btn-lg">
<i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
</button>
<br /><br />
<button type="button" class="btn btn-secondary btn-lg">
<i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
</button>
<button type="button" class="btn btn-secondary">
<i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
</button>
<button type="button" class="btn btn-secondary btn-sm">
<i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
</button>
<br /><br />
<button type="button" class="btn btn-outline-secondary btn-sm">
<i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
</button>
<button type="button" class="btn btn-outline-secondary">
<i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
</button>
<button type="button" class="btn btn-outline-secondary btn-lg">
<i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
</button>

50
themes/hummingbird/stories/ui/cards/cards.html Normal file
View File

@@ -0,0 +1,50 @@
<div class="container">
<div class="row gx-5">
<div class="col-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card border">
<div class="card-body">
<h5 class="card-title">Card with border</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card border">
<img src="../../images/sample.jpg" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>

21
themes/hummingbird/stories/ui/cards/index.stories.js Normal file
View File

@@ -0,0 +1,21 @@
import cardContent from './cards.html';
export default {
title: 'UI/Cards',
parameters: {
docs: {
description: {
component: 'Cards are used to group related content and actions.'
}
}
}
};
export const Cards = () => cardContent;
Cards.parameters = {
docs: {
source: {
code: cardContent
}
}
};

53
themes/hummingbird/stories/ui/content/content.html Normal file
View File

@@ -0,0 +1,53 @@
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p>
<ins
>This line of text is meant to be treated as an addition to the
document.</ins
>
</p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
<blockquote class="blockquote">
<p class="mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.
</p>
</blockquote>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
<code>
&lt;p&gt;Sample text here...&lt;/p&gt; &lt;p&gt;And another line of sample
text here...&lt;/p&gt;
</code>
<pre>
<code>
&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code>
</pre>
<p><var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>
<p>
To switch directories, type <kbd>cd</kbd> followed by the name of the
directory.<br />
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
</p>
<p>
<samp
>This text is meant to be treated as sample output from a computer
program.</samp
>
</p>

21
themes/hummingbird/stories/ui/content/content.stories.js Normal file
View File

@@ -0,0 +1,21 @@
import contentHtml from './content.html';
export default {
title: 'UI/Content',
parameters: {
docs: {
description: {
component: 'Here is the content markup you can use.'
}
}
}
};
export const Content = () => contentHtml;
Content.parameters = {
docs: {
source: {
code: contentHtml
}
}
};

109
themes/hummingbird/stories/ui/dropdowns/dropdowns.html Normal file
View File

@@ -0,0 +1,109 @@
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Primary
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<br />
<div class="btn-group">
<button
class="btn btn-outline-primary dropdown-toggle"
type="button"
id="dropdownMenuButton2"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Primary outline
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br />
<br />
<div class="btn-group">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton3"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Secondary
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-outline-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton4"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Secondary outline
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton4">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br /><br />
<div class="btn-group">
<button
class="btn btn-primary dropdown-toggle"
disabled
type="button"
id="dropdownMenuButton5"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Disabled
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton5">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-outline-primary dropdown-toggle"
disabled
type="button"
id="dropdownMenuButton6"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Disabled outline
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton6">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

35
themes/hummingbird/stories/ui/dropdowns/dropup.html Normal file
View File

@@ -0,0 +1,35 @@
<div class="btn-group dropup">
<button
class="btn btn-primary dropdown-toggle"
type="button"
id="dropdownMenuButton61"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Primary
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton61">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group dropup">
<button
class="btn btn-outline-primary dropdown-toggle"
type="button"
id="dropdownMenuButton62"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Primary outline
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton62">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

52
themes/hummingbird/stories/ui/dropdowns/index.stories.js Normal file
View File

@@ -0,0 +1,52 @@
import dropdownsContent from './dropdowns.html'
import dropupContent from './dropup.html'
import variationsContent from './variations.html'
import withButtonSplitContent from './with-button-split.html'
export default {
title: 'UI/Dropdowns',
parameters: {
docs: {
description: {
component: 'Dropdowns are toggleable, contextual overlays for displaying lists of links and more.'
}
}
}
};
export const Basics = () => dropdownsContent;
Basics.parameters = {
docs: {
source: {
code: dropdownsContent
}
}
};
export const Dropup = () => dropupContent;
Dropup.parameters = {
docs: {
source: {
code: dropupContent
}
}
};
export const Variations = () => variationsContent;
Variations.parameters = {
docs: {
source: {
code: variationsContent
}
}
};
export const WithButtonSplit = () => withButtonSplitContent;
WithButtonSplit.parameters = {
docs: {
source: {
code: withButtonSplitContent
}
}
};
WithButtonSplit.storyName = 'With button split';

333
themes/hummingbird/stories/ui/dropdowns/variations.html Normal file
View File

@@ -0,0 +1,333 @@
<div class="btn-group">
<button
class="btn btn-primary btn-sm dropdown-toggle"
type="button"
id="dropdownMenuButton7"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i class="material-icons">ac_unit</i> Small Drop
</button>
<div class="dropdown-menu menu-sm" aria-labelledby="dropdownMenuButton7">
<a class="dropdown-item" href="#">
<i class="material-icons">ac_unit</i> Iceberg Action
</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-primary dropdown-toggle"
type="button"
id="dropdownMenuButton8"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i class="material-icons">ac_unit</i> Normal Drop
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton8">
<a class="dropdown-item" href="#">
<i class="material-icons">ac_unit</i> Iceberg Action
</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-primary btn-lg dropdown-toggle"
type="button"
id="dropdownMenuButton9"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i class="material-icons">ac_unit</i> Large Drop
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton9">
<a class="dropdown-item" href="#">
<i class="material-icons">ac_unit</i> Iceberg Action
</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-secondary btn-lg dropdown-toggle"
type="button"
id="dropdownMenuButton10"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Large Drop
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton10">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton11"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Normal Drop
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton11">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-secondary btn-sm dropdown-toggle"
type="button"
id="dropdownMenuButton12"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Small Drop
</button>
<div class="dropdown-menu menu-sm" aria-labelledby="dropdownMenuButton12">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br /><br />
<div class="btn-group">
<button
class="btn btn-outline-primary btn-sm dropdown-toggle"
type="button"
id="dropdownMenuButton13"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Small Drop
</button>
<div class="dropdown-menu menu-sm" aria-labelledby="dropdownMenuButton13">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-outline-primary dropdown-toggle"
type="button"
id="dropdownMenuButton14"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Normal Drop
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton14">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-outline-primary btn-lg dropdown-toggle"
type="button"
id="dropdownMenuButton15"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Large Drop
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton15">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-outline-secondary btn-lg dropdown-toggle"
type="button"
id="dropdownMenuButton16"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Large Drop
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton16">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-outline-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton17"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Normal Drop
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton17">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-outline-secondary btn-sm dropdown-toggle"
type="button"
id="dropdownMenuButton18"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Small Drop
</button>
<div class="dropdown-menu menu-sm" aria-labelledby="dropdownMenuButton18">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br /><br />
<div class="btn-group">
<button
class="btn btn-success dropdown-toggle"
type="button"
id="dropdownMenuButton19"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Success
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton19">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-outline-success dropdown-toggle"
type="button"
id="dropdownMenuButton20"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Success
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton20">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-danger dropdown-toggle"
type="button"
id="dropdownMenuButton21"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Danger
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton21">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-outline-danger dropdown-toggle"
type="button"
id="dropdownMenuButton22"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Danger
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton22">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-warning dropdown-toggle"
type="button"
id="dropdownMenuButton23"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Warning
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton23">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-outline-warning dropdown-toggle"
type="button"
id="dropdownMenuButton24"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Warning
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton24">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

493
themes/hummingbird/stories/ui/dropdowns/with-button-split.html Normal file
View File

@@ -0,0 +1,493 @@
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">Primary outline</button>
<button
type="button"
class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br /><br />
<div class="btn-group">
<button type="button" class="btn btn-secondary">Secondary</button>
<button
type="button"
class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary">
Secondary outline
</button>
<button
type="button"
class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br /><br />
<div class="btn-group">
<button type="button" class="btn btn-primary" disabled>Disabled</button>
<button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
disabled
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-primary" disabled>
Disabled outline
</button>
<button
type="button"
class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split"
disabled
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br /><br />
<div class="btn-group dropup">
<button type="button" class="btn btn-primary">Primary UP</button>
<button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-outline-primary">
Primary outline UP
</button>
<button
type="button"
class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br /><br />
<div class="btn-group">
<button type="button" class="btn btn-sm btn-primary">
<i class="material-icons">ac_unit</i> Small group
</button>
<button
type="button"
class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu menu-sm">
<a class="dropdown-item" href="#">
<i class="material-icons">ac_unit</i>
Action
</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">
<i class="material-icons">ac_unit</i> Normal group
</button>
<button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<i class="material-icons">ac_unit</i>
Action
</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-lg btn-primary">
<i class="material-icons">ac_unit</i> Large group
</button>
<button
type="button"
class="btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<i class="material-icons">ac_unit</i>
Action
</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-lg btn-secondary">Large group</button>
<button
type="button"
class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Normal group</button>
<button
type="button"
class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-sm btn-secondary">Small group</button>
<button
type="button"
class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu menu-sm">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br /><br />
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-primary">
Small group
</button>
<button
type="button"
class="btn btn-sm btn-outline-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu menu-sm">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">Normal group</button>
<button
type="button"
class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-lg btn-outline-primary">
Large group
</button>
<button
type="button"
class="btn btn-lg btn-outline-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-lg btn-outline-secondary">
Large group
</button>
<button
type="button"
class="btn btn-lg btn-outline-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary">Normal group</button>
<button
type="button"
class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">
Small group
</button>
<button
type="button"
class="btn btn-sm btn-outline-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu menu-sm">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<br /><br />
<div class="btn-group">
<button type="button" class="btn btn-success">Success</button>
<button
type="button"
class="btn btn-success dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-success">Success</button>
<button
type="button"
class="btn btn-outline-success dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button>
<button
type="button"
class="btn btn-danger dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-danger">Danger</button>
<button
type="button"
class="btn btn-outline-danger dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button>
<button
type="button"
class="btn btn-warning dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-warning">Warning</button>
<button
type="button"
class="btn btn-outline-warning dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

18
themes/hummingbird/stories/ui/form/checkboxes.html Normal file
View File

@@ -0,0 +1,18 @@
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked />
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" />
Option two is this and that&mdash;maybe better than option one
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" disabled />
Option three is disabled
</label>
</div>

10
themes/hummingbird/stories/ui/form/disabled.html Normal file
View File

@@ -0,0 +1,10 @@
<div class="form-group">
<label class="form-label" for="input3">Disabled input</label>
<input
type="text"
class="form-control disabled"
id="input3"
disabled
value="This is a disabled input"
/>
</div>

11
themes/hummingbird/stories/ui/form/helper.html Normal file
View File

@@ -0,0 +1,11 @@
<div class="form-group">
<label class="form-label" for="input6">Top helper</label>
<small class="form-text">I'm here to help the user.</small>
<input type="text" class="form-control" id="input6" />
</div>
<div class="form-group">
<label class="form-label" for="input7">Bottom helper</label>
<input type="text" class="form-control" id="input7" />
<small class="form-text">I'm here to help the user.</small>
</div>

126
themes/hummingbird/stories/ui/form/index.stories.js Normal file
View File

@@ -0,0 +1,126 @@
import inputContent from './input.html'
import disabledContent from './disabled.html'
import helperContent from './helper.html'
import checkboxesContent from './checkboxes.html'
import radiosContent from './radios.html'
import switchContent from './switch.html'
import selectContent from './selects.html'
import statesContent from './states.html'
import groupContent from './input-group.html'
import inputDropdownContent from './input-dropdown.html'
import loginContent from './login-example.html'
export default {
title: 'UI/Forms',
parameters: {
docs: {
description: {
component: 'Forms are used to collect user input and submit data.'
}
}
}
};
export const Normal = () => inputContent;
Normal.parameters = {
docs: {
source: {
code: inputContent
}
}
};
export const Disabled = () => disabledContent;
Disabled.parameters = {
docs: {
source: {
code: disabledContent
}
}
};
export const InputStates = () => statesContent;
InputStates.parameters = {
docs: {
source: {
code: statesContent
}
}
};
InputStates.storyName = 'Input states';
export const InputGroup = () => groupContent;
InputGroup.parameters = {
docs: {
source: {
code: groupContent
}
}
};
InputGroup.storyName = 'Input group';
export const InputWithDropdown = () => inputDropdownContent;
InputWithDropdown.parameters = {
docs: {
source: {
code: inputDropdownContent
}
}
};
InputWithDropdown.storyName = 'Input with dropdown';
export const LoginExample = () => loginContent;
LoginExample.parameters = {
docs: {
source: {
code: loginContent
}
}
};
LoginExample.storyName = 'Example of login form';
export const Helpers = () => helperContent;
Helpers.parameters = {
docs: {
source: {
code: helperContent
}
}
};
export const Checkboxes = () => checkboxesContent;
Checkboxes.parameters = {
docs: {
source: {
code: checkboxesContent
}
}
};
export const RadioButtons = () => radiosContent;
RadioButtons.parameters = {
docs: {
source: {
code: radiosContent
}
}
};
RadioButtons.storyName = 'Radio buttons';
export const Switch = () => switchContent;
Switch.parameters = {
docs: {
source: {
code: switchContent
}
}
};
export const Selects = () => selectContent;
Selects.parameters = {
docs: {
source: {
code: selectContent
}
}
};

43
themes/hummingbird/stories/ui/form/input-dropdown.html Normal file
View File

@@ -0,0 +1,43 @@
<div class="input-group mb-3">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="input-group">
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action before</a></li>
<li><a class="dropdown-item" href="#">Another action before</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
<input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons">
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>

49
themes/hummingbird/stories/ui/form/input-group.html Normal file
View File

@@ -0,0 +1,49 @@
<form>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00</span>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Username" aria-label="Username">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Server" aria-label="Server">
</div>
<div class="input-group">
<span class="input-group-text">With textarea</span>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<div class="input-group input-group-sm my-3">
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group input-group-lg">
<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
</div>
</form>

21
themes/hummingbird/stories/ui/form/input.html Normal file
View File

@@ -0,0 +1,21 @@
<form>
<div class="mb-3">
<label class="form-label" for="input1">Normal input</label>
<input type="text" class="form-control" id="input1" />
</div>
<div class="mb-3">
<label class="form-label" for="input2">Big input</label>
<input type="text" class="form-control form-control-lg" id="input2" />
</div>
<div class="mb-3">
<label class="form-label" for="input2">With placeholder</label>
<input
type="text"
class="form-control form-control-lg"
placeholder="A beautiful placeholder"
id="input2"
/>
</div>
</form>

16
themes/hummingbird/stories/ui/form/login-example.html Normal file
View File

@@ -0,0 +1,16 @@
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

43
themes/hummingbird/stories/ui/form/radios.html Normal file
View File

@@ -0,0 +1,43 @@
<div class="form-check form-check-radio">
<label class="form-check-label">
<input
class="form-check-input"
type="radio"
name="exampleRadios"
id="exampleRadios1"
value="option1"
checked
/>
<i class="form-check-round"></i>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="form-check form-check-radio">
<label class="form-check-label">
<input
class="form-check-input"
type="radio"
name="exampleRadios"
id="exampleRadios2"
value="option2"
/>
<i class="form-check-round"></i>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="form-check form-check-radio disabled">
<label class="form-check-label">
<input
class="form-check-input"
type="radio"
name="exampleRadios"
id="exampleRadios3"
value="option3"
disabled
/>
<i class="form-check-round"></i>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>

13
themes/hummingbird/stories/ui/form/selects.html Normal file
View File

@@ -0,0 +1,13 @@
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

67
themes/hummingbird/stories/ui/form/states.html Normal file
View File

@@ -0,0 +1,67 @@
<form>
<div class="row">
<div class="col-sm-4">
<div class="form-group has-success">
<label class="form-label" for="input12">Success input</label>
<input
type="text"
class="form-control is-valid"
id="input12"
value="This is a success value"
/>
<div class="valid-feedback">This is a success label</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-12">
<div class="form-group has-danger">
<label class="form-label" for="input14">Danger input</label>
<input
type="text"
class="form-control is-invalid"
id="input14"
value="This is a danger value"
/>
<div class="invalid-feedback">This is a danger label</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-6">
<div class="form-group has-success">
<label class="form-label" for="input15"
>Success input with helper</label
>
<small class="form-text">I'm here to help the user.</small>
<input
type="text"
class="form-control is-valid"
id="input15"
value="This is a success value"
/>
<div class="valid-feedback">This is a success label</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group has-success">
<label class="form-label" for="input16"
>Success input with helper</label
>
<input
type="text"
class="form-control is-valid"
id="input16"
value="This is a success value"
/>
<small class="form-text float-right">I'm here to help the user.</small>
<div class="valid-feedback">This is a success label</div>
</div>
</div>
</div>
</form>

16
themes/hummingbird/stories/ui/form/switch.html Normal file
View File

@@ -0,0 +1,16 @@
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

8
themes/hummingbird/stories/ui/headings/headings.html Normal file
View File

@@ -0,0 +1,8 @@
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<p class="h1">p-style h1. Bootstrap heading</p>
<p class="h2">p-style h2. Bootstrap heading</p>
<p class="h3">p-style h3. Bootstrap heading</p>
<p class="h4">p-style h4. Bootstrap heading</p>

21
themes/hummingbird/stories/ui/headings/index.stories.js Normal file
View File

@@ -0,0 +1,21 @@
import headingsContent from './headings.html';
export default {
title: 'UI/Headings',
parameters: {
docs: {
description: {
component: 'Headings are used to display titles and section headers.'
}
}
}
};
export const Headings = () => headingsContent;
Headings.parameters = {
docs: {
source: {
code: headingsContent
}
}
};

11
themes/hummingbird/stories/ui/introduction.mdx Normal file
View File

@@ -0,0 +1,11 @@
import { Meta } from '@storybook/addon-docs';
<Meta title="UI/Introduction" />
# Informations
Hummingbird is using Bootstrap 5, it means that you can use every Bootstrap 5 components
## The UI Folder
This folder contains boostrap components, it's used to show you how Bootstrap has been configured and the look they have.

21
themes/hummingbird/stories/ui/list-group/index.stories.js Normal file
View File

@@ -0,0 +1,21 @@
import listGroupContent from './list-group.html';
export default {
title: 'UI/List group',
parameters: {
docs: {
description: {
component: 'List groups are used to display a series of content.'
}
}
}
};
export const ListGroup = () => listGroupContent;
ListGroup.parameters = {
docs: {
source: {
code: listGroupContent
}
}
};

81
themes/hummingbird/stories/ui/list-group/list-group.html Normal file
View File

@@ -0,0 +1,81 @@
<div class="row">
<div class="col col-sm-4">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action"
>Cras justo odio</a
>
<a href="#" class="list-group-item list-group-item-action"
>Dapibus ac facilisis in</a
>
<a href="#" class="list-group-item list-group-item-action"
>Ang Lorem Ipsum</a
>
<a href="#" class="list-group-item list-group-item-action"
>Morbi leo risus</a
>
<a href="#" class="list-group-item list-group-item-action"
>gumagamit na ngayong bilang</a
>
<a href="#" class="list-group-item list-group-item-action"
>Porta ac consectetur ac</a
>
<a href="#" class="list-group-item list-group-item-action disabled"
>Vestibulum at eros</a
>
</div>
</div>
<div class="col col-sm-4">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action"
>Cras justo odio</a
>
<a href="#" class="list-group-item list-group-item-action active"
>Dapibus ac facilisis in</a
>
<a href="#" class="list-group-item list-group-item-action"
>Ang Lorem Ipsum</a
>
<a href="#" class="list-group-item list-group-item-action"
>Morbi leo risus</a
>
<a href="#" class="list-group-item list-group-item-action"
>gumagamit na ngayong bilang</a
>
<a href="#" class="list-group-item list-group-item-action"
>Porta ac consectetur ac</a
>
<a href="#" class="list-group-item list-group-item-action disabled"
>Vestibulum at eros</a
>
</div>
</div>
<div class="col col-sm-4">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action"
>Cras justo odio</a
>
<a href="#" class="list-group-item list-group-item-action active">
Dapibus ac facilisis in
<span class="badge badge-primary-hover">39</span>
</a>
<a href="#" class="list-group-item list-group-item-action"
>Ang Lorem Ipsum</a
>
<a href="#" class="list-group-item list-group-item-action">
Morbi leo risus
<span class="badge badge-primary-hover">124</span>
</a>
<a href="#" class="list-group-item list-group-item-action">
gumagamit na ngayong bilang
<span class="badge badge-primary-hover">57</span>
</a>
<a href="#" class="list-group-item list-group-item-action">
Porta ac consectetur ac
<span class="badge badge-primary-hover">42</span>
</a>
<a href="#" class="list-group-item list-group-item-action disabled"
>Vestibulum at eros</a
>
</div>
</div>
</div>

21
themes/hummingbird/stories/ui/modal/index.stories.js Normal file
View File

@@ -0,0 +1,21 @@
import modalContent from './modal.html';
export default {
title: 'UI/Modals',
parameters: {
docs: {
description: {
component: 'Modals are used to display content in a dialog box that overlays the main content.'
}
}
}
};
export const Modal = () => modalContent;
Modal.parameters = {
docs: {
source: {
code: modalContent
}
}
};

26
themes/hummingbird/stories/ui/modal/modal.html Normal file
View File

@@ -0,0 +1,26 @@
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
Launch demo modal
</button>
<div class="modal" id="exampleModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

39
themes/hummingbird/stories/ui/navigation/index.stories.js Normal file
View File

@@ -0,0 +1,39 @@
import navtabsContent from './navtabs.html';
import navWithoutBackgroundContent from './navtabs-without-background.html';
export default {
title: 'UI/Navigation',
parameters: {
docs: {
description: {
component: 'Navigation components are used to create navigation menus and tabs.'
}
}
}
};
export const NavigationTabs = () => navtabsContent;
NavigationTabs.parameters = {
docs: {
source: {
code: navtabsContent
},
description: {
story: 'Navigation tabs (Works with background)'
}
}
};
NavigationTabs.storyName = 'Navigation tabs';
export const NavigationPills = () => navWithoutBackgroundContent;
NavigationPills.parameters = {
docs: {
source: {
code: navWithoutBackgroundContent
},
description: {
story: 'Navigation pills (Works without background)'
}
}
};
NavigationPills.storyName = 'Navigation pills';

184
themes/hummingbird/stories/ui/navigation/navtabs-without-background.html Normal file
View File

@@ -0,0 +1,184 @@
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a
class="nav-link active"
id="pills-home-tab"
data-bs-toggle="pill"
href="#pills-home"
role="tab"
aria-controls="pills-home"
aria-expanded="true"
>Home</a
>
</li>
<li class="nav-item">
<a
class="nav-link"
id="pills-profile-tab"
data-bs-toggle="pill"
href="#pills-profile"
role="tab"
aria-controls="pills-profile"
aria-expanded="true"
>Profile</a
>
</li>
<li class="nav-item">
<a
class="nav-link"
id="pills-messages-tab"
data-bs-toggle="pill"
href="#pills-messages"
role="tab"
aria-controls="pills-messages"
aria-expanded="true"
>Messages</a
>
</li>
<li class="nav-item">
<a
class="nav-link"
id="pills-settings-tab"
data-bs-toggle="pill"
href="#pills-settings"
role="tab"
aria-controls="pills-settings"
aria-expanded="true"
>Settings</a
>
</li>
<li class="nav-item">
<a
class="nav-link disabled"
id="pills-disabled-tab"
data-bs-toggle="pill"
href="#pills-settings"
role="tab"
aria-controls="pills-disabled"
aria-expanded="true"
>Disabled</a
>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
href="#"
role="button"
aria-haspopup="true"
aria-expanded="false"
>Dropdown</a
>
<div class="dropdown-menu">
<a
class="dropdown-item"
id="pills-dropdown1-tab"
href="#pills-dropdown1"
role="tab"
data-bs-toggle="pill"
aria-controls="pills-dropdown1"
>@fat</a
>
<a
class="dropdown-item"
id="pills-dropdown2-tab"
href="#pills-dropdown2"
role="tab"
data-bs-toggle="pill"
aria-controls="pills-dropdown2"
>@mdo</a
>
</div>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div
class="tab-pane fade show active"
id="pills-home"
role="tabpanel"
aria-labelledby="pills-home-tab"
>
Aliquam erat volutpat. Nunc eleifend leo vitae magna. In id erat non orci
commodo lobortis. Proin neque massa, cursus ut, gravida ut, lobortis eget,
lacus. Sed diam. Praesent fermentum tempor tellus. Nullam tempus. Mauris ac
felis vel velit tristique imperdiet. Donec at pede. Etiam vel neque nec dui
dignissim bibendum. Vivamus id enim. Phasellus neque orci, porta a, aliquet
quis, semper a, massa. Phasellus purus. Pellentesque tristique imperdiet
tortor. Nam euismod tellus id erat.
</div>
<div
class="tab-pane fade"
id="pills-profile"
role="tabpanel"
aria-labelledby="pills-profile-tab"
>
Nullam eu ante vel est convallis dignissim. Fusce suscipit, wisi nec
facilisis facilisis, est dui fermentum leo, quis tempor ligula erat quis
odio. Nunc porta vulputate tellus. Nunc rutrum turpis sed pede. Sed
bibendum. Aliquam posuere. Nunc aliquet, augue nec adipiscing interdum,
lacus tellus malesuada massa, quis varius mi purus non odio. Pellentesque
condimentum, magna ut suscipit hendrerit, ipsum augue ornare nulla, non
luctus diam neque sit amet urna. Curabitur vulputate vestibulum lorem. Fusce
sagittis, libero non molestie mollis, magna orci ultrices dolor, at
vulputate neque nulla lacinia eros. Sed id ligula quis est convallis tempor.
Curabitur lacinia pulvinar nibh. Nam a sapien.
</div>
<div
class="tab-pane fade"
id="pills-messages"
role="tabpanel"
aria-labelledby="pills-messages-tab"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate,
distinctio eligendi error ex fuga fugiat, ipsam magnam obcaecati officia
perferendis praesentium, repudiandae sequi sit soluta sunt unde voluptate
voluptatum! Nesciunt? Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Ab alias amet asperiores delectus, dolorum est fugiat ipsum nam natus
non obcaecati perspiciatis quam quis tempore temporibus. Debitis dolore
incidunt omnis!
</div>
<div
class="tab-pane fade"
id="pills-settings"
role="tabpanel"
aria-labelledby="pills-settings-tab"
>
Pellentesque dapibus suscipit ligula. Donec posuere augue in quam. Etiam vel
tortor sodales tellus ultricies commodo. Suspendisse potenti. Aenean in sem
ac leo mollis blandit. Donec neque quam, dignissim in, mollis nec, sagittis
eu, wisi. Phasellus lacus. Etiam laoreet quam sed arcu. Phasellus at dui in
ligula mollis ultricies. Integer placerat tristique nisl. Praesent augue.
Fusce commodo. Vestibulum convallis, lorem a tempus semper, dui dui euismod
elit, vitae placerat urna tortor vitae lacus. Nullam libero mauris,
consequat quis, varius et, dictum id, arcu. Mauris mollis tincidunt felis.
Aliquam feugiat tellus ut neque. Nulla facilisis, risus a rhoncus fermentum,
tellus tellus lacinia purus, et dictum nunc justo sit amet elit.
</div>
<div
class="tab-pane fade"
id="pills-dropdown1"
role="tabpanel"
aria-labelledby="pills-dropdown1-tab"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet aperiam
commodi, deserunt harum in maxime odit placeat sapiente velit! Accusamus
asperiores dolore facere laboriosam necessitatibus perferendis ullam unde,
veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab
accusamus, amet delectus deleniti distinctio est ipsum labore laborum maxime
modi nesciunt obcaecati quibusdam quidem quod rem saepe vel! Culpa, quos.
</div>
<div
class="tab-pane fade"
id="pills-dropdown2"
role="tabpanel"
aria-labelledby="pills-dropdown2-tab"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A deserunt dicta
dolorum eveniet, exercitationem impedit minima nemo perspiciatis repellendus
voluptatum. Debitis est in nulla, quo saepe sequi vel! Dignissimos,
incidunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque
suscipit, voluptatum! A ab accusantium adipisci, autem beatae consectetur
doloribus ducimus eveniet explicabo harum, iure iusto laboriosam quas
similique ullam voluptas.
</div>
</div>

16
themes/hummingbird/stories/ui/navigation/navtabs.html Normal file
View File

@@ -0,0 +1,16 @@
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

98
themes/hummingbird/stories/ui/pagination/basic.html Normal file
View File

@@ -0,0 +1,98 @@
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item disabled"><a class="page-link" href="#">4</a></li>
<li class="page-item disabled"><a class="page-link" href="#">5</a></li>
<li class="page-item disabled"><a class="page-link" href="#">6</a></li>
<li class="page-item next">
<a class="page-link" href="#" aria-label="Next">
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item previous">
<a class="page-link" href="#" aria-label="Previous">
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item active"><a class="page-link" href="#">6</a></li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item previous">
<a class="page-link" href="#" aria-label="Previous">
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item active"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">6</a></li>
<li class="page-item next">
<a class="page-link" href="#" aria-label="Next">
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item previous">
<a class="page-link" href="#" aria-label="Previous">
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item disabled"><a class="page-link" href="#">...</a></li>
<li class="page-item"><a class="page-link" href="#">6</a></li>
<li class="page-item active"><a class="page-link" href="#">7</a></li>
<li class="page-item"><a class="page-link" href="#">8</a></li>
<li class="page-item"><a class="page-link" href="#">9</a></li>
<li class="page-item disabled"><a class="page-link" href="#">...</a></li>
<li class="page-item"><a class="page-link" href="#">16</a></li>
<li class="page-item next">
<a class="page-link" href="#" aria-label="Next">
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item previous">
<a class="page-link" href="#" aria-label="Previous">
<i class="material-icons fs-6">chevron_left</i>
<span class="visually-hidden">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item active"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">6</a></li>
<li class="page-item next">
<a class="page-link" href="#" aria-label="Next">
<i class="material-icons fs-6">chevron_right</i>
<span class="visually-hidden">Next</span>
</a>
</li>
</ul>
</nav>

21
themes/hummingbird/stories/ui/pagination/index.stories.js Normal file
View File

@@ -0,0 +1,21 @@
import basicContent from './basic.html';
export default {
title: 'UI/Pagination',
parameters: {
docs: {
description: {
component: 'Pagination is used to navigate between pages of content.'
}
}
}
};
export const Basic = () => basicContent;
Basic.parameters = {
docs: {
source: {
code: basicContent
}
}
};

21
themes/hummingbird/stories/ui/progress/index.stories.js Normal file
View File

@@ -0,0 +1,21 @@
import progressContent from './progress.html';
export default {
title: 'UI/Progress Bar',
parameters: {
docs: {
description: {
component: 'Progress bars are used to show the completion status of a task or process.'
}
}
}
};
export const ProgressBar = () => progressContent;
ProgressBar.parameters = {
docs: {
source: {
code: progressContent
}
}
};

51
themes/hummingbird/stories/ui/progress/progress.html Normal file
View File

@@ -0,0 +1,51 @@
<div class="progress">
<div
class="progress-bar bg-primary"
role="progressbar"
style="width: 25%;"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
>
25%
</div>
</div>
<br />
<div class="progress">
<div
class="progress-bar bg-success"
role="progressbar"
style="width: 50%;"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
>
50%
</div>
</div>
<br />
<div class="progress">
<div
class="progress-bar bg-danger"
role="progressbar"
style="width: 75%;"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
>
75%
</div>
</div>
<br />
<div class="progress">
<div
class="progress-bar bg-warning"
role="progressbar"
style="width: 100%;"
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
>
100%
</div>
</div>

30
themes/hummingbird/stories/ui/tables/basic.html Normal file
View File

@@ -0,0 +1,30 @@
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td class="active">Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

42
themes/hummingbird/stories/ui/tables/bootstrap.html Normal file
View File

@@ -0,0 +1,42 @@
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr class="table-secondary">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr class="table-success">
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr class="table-danger">
<th scope="row">3</th>
<td>Maxime</td>
<td>de Biloe</td>
<td>@mbiloe</td>
</tr>
<tr class="table-warning">
<th scope="row">3</th>
<td>Thomas</td>
<td>de Nabord</td>
<td>@quezalcot</td>
</tr>
</tbody>
</table>

30
themes/hummingbird/stories/ui/tables/bordered.html Normal file
View File

@@ -0,0 +1,30 @@
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td class="active">Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

30
themes/hummingbird/stories/ui/tables/dark-bordered.html Normal file
View File

@@ -0,0 +1,30 @@
<table class="table table-bordered table-dark">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td class="active">Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

30
themes/hummingbird/stories/ui/tables/dark-hoverable.html Normal file
View File

@@ -0,0 +1,30 @@
<table class="table table-hover table-dark">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td class="active">Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

30
themes/hummingbird/stories/ui/tables/dark-striped.html Normal file
View File

@@ -0,0 +1,30 @@
<table class="table table-striped table-dark">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td class="active">Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

30
themes/hummingbird/stories/ui/tables/dark-with-head.html Normal file
View File

@@ -0,0 +1,30 @@
<table class="table table-dark">
<thead class="thead-dark">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td class="active">Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

30
themes/hummingbird/stories/ui/tables/dark.html Normal file
View File

@@ -0,0 +1,30 @@
<table class="table table-dark">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td class="active">Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

30
themes/hummingbird/stories/ui/tables/hoverable.html Normal file
View File

@@ -0,0 +1,30 @@
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td class="active">Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

147
themes/hummingbird/stories/ui/tables/index.stories.js Normal file
View File

@@ -0,0 +1,147 @@
import basicContent from './basic.html'
import borderedContent from './bordered.html'
import hoverableContent from './hoverable.html'
import withfiltersContent from './withfilters.html'
import withformContent from './withform.html'
import stripedContent from './striped.html'
import sortableContent from './sortable.html'
import bootstrapContent from './bootstrap.html'
import darkContent from './dark.html'
import darkStripedContent from './dark-striped.html'
import darkHoverableContent from './dark-hoverable.html'
import darkBorderedContent from './dark-bordered.html'
import darkWithHeadContent from './dark-with-head.html'
export default {
title: 'UI/Tables',
parameters: {
docs: {
description: {
component: 'Tables are used to display data in a structured format.'
}
}
}
};
export const Basic = () => basicContent;
Basic.parameters = {
docs: {
source: {
code: basicContent
}
}
};
export const Bordered = () => borderedContent;
Bordered.parameters = {
docs: {
source: {
code: borderedContent
}
}
};
export const Hoverable = () => hoverableContent;
Hoverable.parameters = {
docs: {
source: {
code: hoverableContent
}
}
};
export const WithFilters = () => withfiltersContent;
WithFilters.parameters = {
docs: {
source: {
code: withfiltersContent
}
}
};
WithFilters.storyName = 'With filters';
export const WithForm = () => withformContent;
WithForm.parameters = {
docs: {
source: {
code: withformContent
}
}
};
WithForm.storyName = 'With form';
export const Striped = () => stripedContent;
Striped.parameters = {
docs: {
source: {
code: stripedContent
}
}
};
export const Sortable = () => sortableContent;
Sortable.parameters = {
docs: {
source: {
code: sortableContent
}
}
};
export const Bootstrap = () => bootstrapContent;
Bootstrap.parameters = {
docs: {
source: {
code: bootstrapContent
}
}
};
export const Dark = () => darkContent;
Dark.parameters = {
docs: {
source: {
code: darkContent
}
}
};
export const DarkStriped = () => darkStripedContent;
DarkStriped.parameters = {
docs: {
source: {
code: darkStripedContent
}
}
};
DarkStriped.storyName = 'Dark striped';
export const DarkHoverable = () => darkHoverableContent;
DarkHoverable.parameters = {
docs: {
source: {
code: darkHoverableContent
}
}
};
DarkHoverable.storyName = 'Dark hoverable';
export const DarkBordered = () => darkBorderedContent;
DarkBordered.parameters = {
docs: {
source: {
code: darkBorderedContent
}
}
};
DarkBordered.storyName = 'Dark bordered';
export const DarkWithHead = () => darkWithHeadContent;
DarkWithHead.parameters = {
docs: {
source: {
code: darkWithHeadContent
}
}
};
DarkWithHead.storyName = 'Dark with head';

55
themes/hummingbird/stories/ui/tables/sortable.html Normal file
View File

@@ -0,0 +1,55 @@
<table class="table">
<thead>
<tr>
<th scope="col">
<div
class="ps-sortable-column"
data-sort-col-name="id"
data-sort-is-current="true"
data-sort-direction="desc"
>
<span role="columnheader">ID</span>
<span role="button" class="ps-sort" aria-label="Sort"></span>
</div>
</th>
<th scope="col">
<div class="ps-sortable-column">
<span role="columnheader">First Name</span>
<span role="button" class="ps-sort" aria-label="Sort"></span>
</div>
</th>
<th scope="col">
<div class="ps-sortable-column">
<span role="columnheader">Last Name</span>
<span role="button" class="ps-sort" aria-label="Sort"></span>
</div>
</th>
<th scope="col">
<div class="ps-sortable-column">
<span role="columnheader">Username</span>
<span role="button" class="ps-sort" aria-label="Sort"></span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td class="active">Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

30
themes/hummingbird/stories/ui/tables/striped.html Normal file
View File

@@ -0,0 +1,30 @@
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td class="active">Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

81
themes/hummingbird/stories/ui/tables/withfilters.html Normal file
View File

@@ -0,0 +1,81 @@
<table class="table">
<thead class="with-filters">
<tr class="column-headers">
<th></th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
<tr class="column-filters">
<td></td>
<th>
<input
type="text"
class="form-control"
placeholder="Search first name"
name="search_first_name"
value=""
/>
</th>
<th>
<input
type="text"
class="form-control"
placeholder="Search last name"
name="search_last_name"
value=""
/>
</th>
<th>
<input
type="text"
class="form-control"
placeholder="Search username"
name="search_user_name"
value=""
/>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form-group">
<div class="md-checkbox md-checkbox-inline">
<label>
<input type="checkbox" name="checkbox[]" checked />
<i class="md-checkbox-control"></i>
</label>
</div>
</td>
<td>Mark</td>
<td class="active">Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td class="form-group">
<div class="md-checkbox md-checkbox-inline">
<label>
<input type="checkbox" name="checkbox[]" checked disabled />
<i class="md-checkbox-control"></i>
</label>
</div>
</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td class="form-group">
<div class="md-checkbox md-checkbox-inline">
<label>
<input type="checkbox" name="checkbox[]" />
<i class="md-checkbox-control"></i>
</label>
</div>
</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

55
themes/hummingbird/stories/ui/tables/withform.html Normal file
View File

@@ -0,0 +1,55 @@
<table class="table table-form">
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Input text</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form-group">
<div class="md-checkbox md-checkbox-inline">
<label>
<input type="checkbox" name="checkbox[]" />
<i class="md-checkbox-control"></i>
</label>
</div>
</td>
<td>Mark</td>
<td class="active">Otto</td>
<td>@mdo</td>
<td><input type="text" class="form-control" name="input[]" /></td>
</tr>
<tr>
<td class="form-group">
<div class="md-checkbox md-checkbox-inline">
<label>
<input type="checkbox" name="checkbox[]" />
<i class="md-checkbox-control"></i>
</label>
</div>
</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td><input type="text" class="form-control" name="input[]" /></td>
</tr>
<tr>
<td class="form-group">
<div class="md-checkbox md-checkbox-inline">
<label>
<input type="checkbox" name="checkbox[]" />
<i class="md-checkbox-control"></i>
</label>
</div>
</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
<td><input type="text" class="form-control" name="input[]" /></td>
</tr>
</tbody>
</table>

21
themes/hummingbird/stories/ui/texts/index.stories.js Normal file
View File

@@ -0,0 +1,21 @@
import textsContent from './texts.html';
export default {
title: 'UI/Texts',
parameters: {
docs: {
description: {
component: 'Here are every texts components you can use.'
}
}
}
};
export const Texts = () => textsContent;
Texts.parameters = {
docs: {
source: {
code: textsContent
}
}
};

36
themes/hummingbird/stories/ui/texts/texts.html Normal file
View File

@@ -0,0 +1,36 @@
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>
<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>

38
themes/hummingbird/stories/ui/toasts/index.stories.js Normal file
View File

@@ -0,0 +1,38 @@
import toastsContent from './toasts.html';
import extendedContent from './toasts-extended.html';
export default {
title: 'UI/Toasts',
parameters: {
docs: {
description: {
component: 'Toasts are used to display non-disruptive messages to users.'
}
}
}
};
export const Toasts = () => toastsContent;
Toasts.parameters = {
docs: {
source: {
code: toastsContent
},
description: {
story: 'Basic toasts'
}
}
};
export const ExtendedToasts = () => extendedContent;
ExtendedToasts.parameters = {
docs: {
source: {
code: extendedContent
},
description: {
story: 'Extended toasts'
}
}
};
ExtendedToasts.storyName = 'Extended toasts';

53
themes/hummingbird/stories/ui/toasts/toasts-extended.html Normal file
View File

@@ -0,0 +1,53 @@
<div class="toast-container">
<div class="toast text-white bg-primary border-0 show fade">
<div class="toast-header text-white bg-primary">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
</div>
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast text-white bg-secondary border-0 show fade">
<div class="toast-header text-white bg-secondary">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
</div>
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast text-white bg-danger border-0 show fade">
<div class="toast-header text-white bg-danger">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
</div>
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast text-white bg-success border-0 show fade">
<div class="toast-header text-white bg-success">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
</div>
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>

73
themes/hummingbird/stories/ui/toasts/toasts.html Normal file
View File

@@ -0,0 +1,73 @@
<div class="toast-container">
<div class="toast align-items-center text-white bg-primary border-0 show fade" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast align-items-center text-white bg-secondary border-0 show fade" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast align-items-center text-white bg-success border-0 show fade" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast align-items-center text-white bg-danger border-0 show fade" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast align-items-center text-white bg-warning border-0 show fade" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast align-items-center text-white bg-info border-0 show fade" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast align-items-center text-black bg-light border-0 show fade" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-dark me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="toast align-items-center text-white bg-dark border-0 show fade" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>