LOADING
-LOADING
-LOADING
+.accordion-flush class. This is the first item's accordion body..accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content..accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
Testing default markup
-This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
.accordion-flush class. This is the first item's
+ accordion body.
+ .accordion-flush class. This is the second item's
+ accordion body. Let's imagine this being filled with some actual
+ content.
+ .accordion-flush class. This is the third item's
+ accordion body. Nothing more exciting happening here in terms of
+ content, but just filling up the space to make it look, at least at
+ first glance, a bit more representative of how this would look in a
+ real-world application.
+
+ This is the first item's accordion body. It is shown
+ by default, until the collapse plugin adds the appropriate classes
+ that we use to style each element. These classes control the overall
+ appearance, as well as the showing and hiding via CSS transitions. You
+ can modify any of this with custom CSS or overriding our default
+ variables. It's also worth noting that just about any HTML can go
+ within the .accordion-body, though the transition does
+ limit overflow.
+
+ This is the second item's accordion body.
+ It is hidden by default, until the collapse plugin adds the
+ appropriate classes that we use to style each element. These classes
+ control the overall appearance, as well as the showing and hiding via
+ CSS transitions. You can modify any of this with custom CSS or
+ overriding our default variables. It's also worth noting that just
+ about any HTML can go within the .accordion-body, though
+ the transition does limit overflow.
+
+ This is the third item's accordion body. It is hidden
+ by default, until the collapse plugin adds the appropriate classes
+ that we use to style each element. These classes control the overall
+ appearance, as well as the showing and hiding via CSS transitions. You
+ can modify any of this with custom CSS or overriding our default
+ variables. It's also worth noting that just about any HTML can go
+ within the .accordion-body, though the transition does
+ limit overflow.
+
Testing default markup
+
+ This is the first item's accordion body. It is shown
+ by default, until the collapse plugin adds the appropriate classes
+ that we use to style each element. These classes control the overall
+ appearance, as well as the showing and hiding via CSS transitions. You
+ can modify any of this with custom CSS or overriding our default
+ variables. It's also worth noting that just about any HTML can go
+ within the .accordion-body, though the transition does
+ limit overflow.
+
+ This is the second item's accordion body.
+ It is hidden by default, until the collapse plugin adds the
+ appropriate classes that we use to style each element. These classes
+ control the overall appearance, as well as the showing and hiding via
+ CSS transitions. You can modify any of this with custom CSS or
+ overriding our default variables. It's also worth noting that just
+ about any HTML can go within the .accordion-body, though
+ the transition does limit overflow.
+
+ This is the third item's accordion body. It is hidden
+ by default, until the collapse plugin adds the appropriate classes
+ that we use to style each element. These classes control the overall
+ appearance, as well as the showing and hiding via CSS transitions. You
+ can modify any of this with custom CSS or overriding our default
+ variables. It's also worth noting that just about any HTML can go
+ within the .accordion-body, though the transition does
+ limit overflow.
+
+ This is the first item's accordion body. It is shown
+ by default, until the collapse plugin adds the appropriate classes
+ that we use to style each element. These classes control the overall
+ appearance, as well as the showing and hiding via CSS transitions. You
+ can modify any of this with custom CSS or overriding our default
+ variables. It's also worth noting that just about any HTML can go
+ within the .accordion-body, though the transition does
+ limit overflow.
+
+ This is the second item's accordion body.
+ It is hidden by default, until the collapse plugin adds the
+ appropriate classes that we use to style each element. These classes
+ control the overall appearance, as well as the showing and hiding via
+ CSS transitions. You can modify any of this with custom CSS or
+ overriding our default variables. It's also worth noting that just
+ about any HTML can go within the .accordion-body, though
+ the transition does limit overflow.
+
+ This is the third item's accordion body. It is hidden
+ by default, until the collapse plugin adds the appropriate classes
+ that we use to style each element. These classes control the overall
+ appearance, as well as the showing and hiding via CSS transitions. You
+ can modify any of this with custom CSS or overriding our default
+ variables. It's also worth noting that just about any HTML can go
+ within the .accordion-body, though the transition does
+ limit overflow.
+
Simple paragraph
-Simple paragraph
+Some quick example text to build on the card title and make up the bulk of the card's content.
- Go somewhere -Some quick example text to build on the card title and make up the bulk of the card's content.
-This is some text within a card body.
-Some quick example text to build on the card title and make up the bulk of the card's content.
- Card link - Another link -Some quick example text to build on the card title and make up the bulk of the card's content.
-With supporting text below as a natural lead-in to additional content.
- Go somewhere -With supporting text below as a natural lead-in to additional content.
- Go somewhere -2 days ago
-This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-Last updated 3 mins ago
-This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-Last updated 3 mins ago
-With supporting text below as a natural lead-in to additional content.
- Go somewhere -With supporting text below as a natural lead-in to additional content.
- Go somewhere -Some quick example text to build on the card title and make up the bulk of the card's content.
-Some quick example text to build on the card title and make up the bulk of the card's content.
-Some quick example text to build on the card title and make up the bulk of the card's content.
-Some quick example text to build on the card title and make up the bulk of the card's content.
-Some quick example text to build on the card title and make up the bulk of the card's content.
-Some quick example text to build on the card title and make up the bulk of the card's content.
-Some quick example text to build on the card title and make up the bulk of the card's content.
-Some quick example text to build on the card title and make up the bulk of the card's content.
-Some quick example text to build on the card title and make up the bulk of the card's content.
-Some quick example text to build on the card title and make up the bulk of the card's content.
-Some quick example text to build on the card title and make up the bulk of the card's content.
-Some quick example text to build on the card title and make up the bulk of the card's content.
-Some quick example text to build on the card title and make up the bulk of the card's content.
-Some quick example text to build on the card title and make up the bulk of the card's content.
-Some quick example text to build on the card title and make up the bulk of the card's content.
-Some quick example text to build on the card title and make up the bulk of the card's content.
-This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
-+ Some quick example text to build on the card title and make up the + bulk of the card's content. +
+ Go somewhere ++ Some quick example text to build on the card title and make up the bulk + of the card's content. +
+This is some text within a card body.
++ Some quick example text to build on the card title and make up the bulk + of the card's content. +
+ Card link + Another link ++ Some quick example text to build on the card title and make up the bulk + of the card's content. +
++ With supporting text below as a natural lead-in to additional content. +
+ Go somewhere ++ With supporting text below as a natural lead-in to additional content. +
+ Go somewhere +2 days ago
++ This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer. +
++ Last updated 3 mins ago +
++ This is a wider card with supporting text below as a natural lead-in to + additional content. This content is a little bit longer. +
+Last updated 3 mins ago
++ With supporting text below as a natural lead-in to additional content. +
+ Go somewhere ++ With supporting text below as a natural lead-in to additional content. +
+ Go somewhere ++ Some quick example text to build on the card title and make up the bulk + of the card's content. +
++ Some quick example text to build on the card title and make up the bulk + of the card's content. +
++ Some quick example text to build on the card title and make up the bulk + of the card's content. +
++ Some quick example text to build on the card title and make up the bulk + of the card's content. +
++ Some quick example text to build on the card title and make up the bulk + of the card's content. +
++ Some quick example text to build on the card title and make up the bulk + of the card's content. +
++ Some quick example text to build on the card title and make up the bulk + of the card's content. +
++ Some quick example text to build on the card title and make up the bulk + of the card's content. +
++ Some quick example text to build on the card title and make up the bulk + of the card's content. +
++ Some quick example text to build on the card title and make up the bulk + of the card's content. +
++ Some quick example text to build on the card title and make up the bulk + of the card's content. +
++ Some quick example text to build on the card title and make up the bulk + of the card's content. +
++ Some quick example text to build on the card title and make up the bulk + of the card's content. +
++ Some quick example text to build on the card title and make up the bulk + of the card's content. +
++ Some quick example text to build on the card title and make up the bulk + of the card's content. +
++ Some quick example text to build on the card title and make up the bulk + of the card's content. +
++ This is a longer card with supporting text below as a natural + lead-in to additional content. This content is a little bit longer. +
++ This is a longer card with supporting text below as a natural + lead-in to additional content. This content is a little bit longer. +
++ This is a longer card with supporting text below as a natural + lead-in to additional content. This content is a little bit longer. +
++ This is a longer card with supporting text below as a natural + lead-in to additional content. This content is a little bit longer. +
+Some representative placeholder content for the first slide.
-Some representative placeholder content for the second slide.
-Some representative placeholder content for the third slide.
-Some representative placeholder content for the first slide.
-Some representative placeholder content for the second slide.
-Some representative placeholder content for the third slide.
-Some representative placeholder content for the first slide.
-Some representative placeholder content for the second slide.
-Some representative placeholder content for the third slide.
-Some representative placeholder content for the first slide.
+Some representative placeholder content for the second slide.
+Some representative placeholder content for the third slide.
+Some representative placeholder content for the first slide.
+Some representative placeholder content for the second slide.
+Some representative placeholder content for the third slide.
+Some representative placeholder content for the first slide.
+Some representative placeholder content for the second slide.
+Some representative placeholder content for the third slide.
+Paragraph 1
-Paragraph 2
-Paragraph 1
+Paragraph 2
+
- `,
-};
-
-export const ImageOnly = Template.bind({});
-ImageOnly.args = {
- sources : `
-
- `,
-};
\ No newline at end of file
+import '../components/atoms/Image/cod-image';
+
+export default {
+ title: 'Components/Atoms/Image',
+ argTypes: {
+ align: {
+ control: { type: 'select' },
+ options: ['start', 'end'],
+ },
+ backgroundColor: {
+ control: { type: 'select' },
+ options: [
+ 'primary',
+ 'secondary',
+ 'success',
+ 'info',
+ 'warning',
+ 'danger',
+ 'light',
+ 'dark',
+ ],
+ },
+ size: {
+ control: { type: 'select' },
+ options: ['fluid', 'thumbnail'],
+ },
+ },
+};
+// Template
+const Template = (args) => {
+ const image = document.createElement('cod-image');
+ image.innerHTML = args.sources;
+ return image;
+};
+
+export const ImageSources = Template.bind({});
+ImageSources.args = {
+ sources: `
+
+ `,
+};
+
+export const ImageOnly = Template.bind({});
+ImageOnly.args = {
+ sources: `
+
+ `,
+};
diff --git a/src/stories/listgroup.stories.js b/src/stories/listgroup.stories.js
index 7b9f40ce..20d09d37 100644
--- a/src/stories/listgroup.stories.js
+++ b/src/stories/listgroup.stories.js
@@ -1,198 +1,332 @@
-import { html } from 'lit-html';
-import '../components/atoms/ListGroupItem/cod-listgroup-item';
-import '../components/molecules/ListGroup/cod-listgroup';
-
-export default {
- title: 'Components/Molecules/ListGroup',
-};
-
-export const Basic = () => html`
-Woo-hoo, you're reading this text in a modal!
-I will not close if you click outside of me. Don't even try to press escape key.
-This is a vertically centered modal.
-Woo-hoo, you're reading this text in a modal!
-Woo-hoo, you're reading this text in a modal!
-Woo-hoo, you're reading this text in a modal!
-Woo-hoo, you're reading this text in a modal!
+I will not close if you click outside of me. Don't even try to press escape key.
+This is a vertically centered modal.
+Woo-hoo, you're reading this text in a modal!
+Woo-hoo, you're reading this text in a modal!
+Woo-hoo, you're reading this text in a modal!
+Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
-Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
-Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
-Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
-Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
-Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
-Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
-Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
-Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
-+ Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. +
++ Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. +
++ Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. +
++ Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. +
++ Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. +
++ Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. +
++ Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. +
++ Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. +
++ Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. +
+| # | -First | -Last | -Handle | -
|---|---|---|---|
| 1 | -Mark | -Otto | -@mdo | -
| 2 | -Jacob | -Thornton | -@fat | -
| 3 | -Larry the Bird | -||
| # | +First | +Last | +Handle | +
|---|---|---|---|
| 1 | +Mark | +Otto | +@mdo | +
| 2 | +Jacob | +Thornton | +@fat | +
| 3 | +Larry the Bird | +||