OS: 41, 47, 48: Create Hero, Text, Two Column in Storybook #4
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| @use "../../scss/_variables/index.scss" as var; | ||
|
|
||
| button { | ||
| @include var.transition-properties((background-color, box-shadow, color), 0.2s); | ||
| background-color: transparent; | ||
| border: 0; | ||
| border-radius: 0; | ||
| box-shadow: inset 0 0 0 2px var.$white; | ||
| color: var.$white; | ||
| cursor: pointer; | ||
| display: inline-block; | ||
| font-size: 0.8em; | ||
| font-weight: 600; | ||
| height: 3.5em; | ||
| letter-spacing: 0.25em; | ||
| line-height: 3.5em; | ||
| padding: 0 1.75em; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| text-transform: uppercase; | ||
| white-space: nowrap; | ||
|
|
||
| svg { | ||
| filter: brightness(10); | ||
| } | ||
|
|
||
| &:hover { | ||
| opacity: 1; | ||
| box-shadow: inset 0 0 0 2px var.$anakiwa; | ||
| color: var.$anakiwa; | ||
|
|
||
| svg { | ||
| filter: unset; | ||
| } | ||
| } | ||
|
|
||
| &.fill { | ||
| background-color: var.$white; | ||
| color: var.$black; | ||
|
|
||
| svg { | ||
| filter: brightness(0); | ||
| } | ||
|
|
||
| &:hover { | ||
| background-color: var.$anakiwa; | ||
| } | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import button from "./button.twig"; | ||
| import "./button.scss"; | ||
|
|
||
| export default { | ||
| title: "Atoms/Get Started", | ||
| argTypes: { | ||
| fill: { control: 'boolean' }, | ||
| text: { control: 'text' } | ||
| }, | ||
| render: ({ ...args }) => { | ||
| return button({ ...args }); | ||
| }, | ||
| }; | ||
|
|
||
| export const Default = { | ||
| args: { | ||
| fill: true, | ||
| text: "Get Started", | ||
| show_arrow: false, | ||
| } | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <button class="get-started {{ fill ? 'fill' : '' }} {{ width | default('w-100') }} {{ show_arrow ? 'show-arrow' : '' }}"> | ||
| {{ text }} | ||
| {% if show_arrow %} | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewbox="0 0 36 24"> | ||
| <line x1="0" y1="12" x2="34" y2="12" style="stroke: #9bf1ff; stroke-width: 2px;"/> | ||
| <line x1="25" y1="4" x2="34" y2="12.5" style="stroke: #9bf1ff; stroke-width: 2px;"/> | ||
| <line x1="25" y1="20" x2="34" y2="11.5" style="stroke: #9bf1ff; stroke-width: 2px;"/> | ||
| </svg> | ||
| {% endif %} | ||
| </button> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| // Import Bootstrap icons | ||
| @use "../../scss/_variables/index.scss" as var; | ||
| @import "~bootstrap-icons/font/bootstrap-icons.css"; | ||
|
|
||
| .icon { | ||
|
Contributor
There was a problem hiding this comment. Fix the indentation issue. It should be 2 spaces not a tab.
Collaborator
Author
There was a problem hiding this comment. I fixed the indentaion |
||
| text-decoration: none; | ||
| border-bottom: none; | ||
| position: relative; | ||
|
|
||
| &:before { | ||
| -moz-osx-font-smoothing: grayscale; | ||
| -webkit-font-smoothing: antialiased; | ||
| display: inline-block; | ||
| font-style: normal; | ||
| font-variant: normal; | ||
| text-rendering: auto; | ||
| line-height: 1; | ||
| text-transform: none !important; | ||
| font-family: 'Font Awesome 5 Free'; | ||
| font-weight: 400; | ||
| line-height: inherit; | ||
| } | ||
|
|
||
| >.label { | ||
| display: none; | ||
| } | ||
|
|
||
| &.solid:before { | ||
| font-weight: 900; | ||
| } | ||
|
|
||
| &.brands:before { | ||
| font-family: 'Font Awesome 5 Brands'; | ||
| } | ||
|
|
||
| &.alt:before { | ||
| background-color: var.$white; | ||
| border-radius: 100%; | ||
| color: var.$ebony-clay; | ||
| display: inline-block; | ||
| height: 2em; | ||
| line-height: 2em; | ||
| text-align: center; | ||
| width: 2em; | ||
| } | ||
| } | ||
|
|
||
| a.icon.alt:before { | ||
| @include var.transition-properties((background-color), 0.2s); | ||
| } | ||
|
|
||
| a.icon.alt:hover:before { | ||
| background-color: var.$viking; | ||
| } | ||
|
|
||
| a.icon.alt:active:before { | ||
| background-color: var.$shakepseare; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import icons from "./icon.twig"; // Include HTML | ||
| import "./icon.scss" // Include SCSS | ||
|
|
||
| export default { | ||
| title: "Atoms/Icon", | ||
| render: ({ ...args }) => { | ||
| return icons({ ...args }) | ||
| } | ||
| } | ||
|
|
||
| export const Default = {} | ||
|
|
||
| Default.args = { | ||
| iconclass: "bi-facebook", | ||
| iconname: "Storybook", | ||
| url: "#" | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <a href="{{ url }}" class="icon brands alt {{ iconclass }}"> | ||
| <span class="label">{{ iconname }}</span> | ||
| </a> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| <img src="{{ src }}" alt="{{ alt }}" class="{{ classes }}" width="{{ width }}" height="{{ height }}"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| @use "../../scss/_variables/index.scss" as var; | ||
|
|
||
| label { | ||
| font-size: 0.8em; | ||
| font-weight: 600; | ||
| letter-spacing: 0.25em; | ||
| margin-bottom: 1em; | ||
| } | ||
|
|
||
| input, | ||
| textarea { | ||
| appearance: none; | ||
| background: var.$input-bg; | ||
| border: none; | ||
| border-radius: 0; | ||
| color: inherit; | ||
| display: block; | ||
| outline: 0; | ||
| padding: 0 1em; | ||
| text-decoration: none; | ||
| width: 100%; | ||
|
|
||
| &:invalid { | ||
| box-shadow: none; | ||
| } | ||
|
|
||
| &:focus { | ||
| color: var.$white; | ||
| border-color: var.$anakiwa; | ||
| box-shadow: 0 0 0 2px var.$anakiwa; | ||
| } | ||
|
|
||
| &::-webkit-input-placeholder { | ||
| color: var.$footer-color !important; | ||
| opacity: 1.0; | ||
| } | ||
| } | ||
|
|
||
| input { | ||
| height: 2.75em; | ||
| } | ||
|
|
||
| textarea { | ||
| padding: 0.75em 1em; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import input from "./input.twig"; | ||
| import "./input.scss"; | ||
|
|
||
| export default { | ||
| title: "Atoms/Input", | ||
| argTypes: { | ||
| label: { control: 'text' }, | ||
| name: { control: 'text' }, | ||
| type: { control: 'text' }, | ||
| }, | ||
| render: ({ ...args }) => { | ||
| return input({ ...args }); | ||
| }, | ||
| }; | ||
|
|
||
| export const Default = { | ||
| args: { | ||
| name: "text", | ||
| type: "text", | ||
| label: "Storybook Label" | ||
| } | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| <label class="text-white text-uppercase" for="{{ name }}">{{ label }}</label> | ||
| {% if type == "textarea" %} | ||
| <textarea name="{{ name }}" rows="6" data-testid="{{ name }}"></textarea> | ||
| {% else %} | ||
| <input type="{{ type }}" name="{{ name }}" data-testid="{{ name }}"> | ||
| {% endif %} |
File renamed without changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import article from "./article.twig"; | ||
|
|
||
| export default { | ||
| title: "Molecules/Article", | ||
| tags: ["autodocs"], | ||
| render: ({ ...args }) => { | ||
| return article({ ...args }); | ||
| }, | ||
| }; | ||
|
|
||
| export const Article = { | ||
| args: { | ||
| title: "Generic", | ||
| articlecontent: | ||
| "\nDonec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fergiat. Pellentesque in mi eu massa lacinia malesuada et a elit. Donec urna ex, lacinia in purus ac, pretium pulvinar mauris. Curabitur sapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit.<br> <br> \n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel sed vehicula.<br> <br> \n\t\t\tInterdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fersapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit tristique lorem ipsum dolor.\n\t\t", | ||
| }, | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <main class="main"> | ||
| <section> | ||
| <div class="inner"> | ||
| <header class="major d-inline"> | ||
| <h1 class="d-inline">{{ title }}</h1> | ||
| </header> | ||
| <span class="image main mt-4 mb-4"> | ||
| {% include '@atoms/image/image.twig' with { | ||
| src: 'https://html5up.net/uploads/demos/forty/images/pic11.jpg', | ||
| alt: 'Generic', | ||
| classes: 'img-fluid', | ||
| width: '100%', | ||
| height: 'auto' | ||
| } | ||
| %} | ||
| </span> | ||
| <p>{{ articlecontent }}</p> | ||
| </div> | ||
| </section> | ||
| </main> |
File renamed without changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| @use "../../scss/_variables/index.scss" as var; | ||
|
|
||
| .contact-info { | ||
| background-color: var.$ebony-clay; | ||
| padding: 3em 0 1em 3em; | ||
|
|
||
| .contact-method { | ||
| margin-bottom: 2em; | ||
| padding-left: 3.25em; | ||
|
|
||
| .icon { | ||
| left: 0; | ||
| position: absolute; | ||
| top: 0; | ||
| } | ||
|
|
||
| h3 { | ||
| margin-bottom: 0.5em; | ||
| } | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import contact from "./contact-info.twig"; | ||
| import "./contact-info.scss" | ||
| import "../../atoms/input/input.scss" | ||
|
|
||
| export default { | ||
| title: "Molecules/Contact", | ||
| tags: ["autodocs"], | ||
| render: ({ ...args }) => { | ||
| return contact({ ...args }); | ||
| }, | ||
| }; | ||
|
|
||
| export const contactInfo = {}; | ||
|
|
||
| contactInfo.args = { | ||
| contactMethods: [ | ||
| { | ||
| "icon": "bi-envelope", | ||
| "title": "Email", | ||
| "url": "information@untitled.tld" | ||
| }, | ||
| { | ||
| "icon": "bi-phone-fill", | ||
| "title": "Phone", | ||
| "url": "(000) 000-0000 x12387" | ||
| }, | ||
| { | ||
| "icon": "bi-house", | ||
| "title": "Address", | ||
| "url": "1234 Somewhere Road #5432<br>Nashville, TN 00000<br>United States of America" | ||
| } | ||
| ] | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fix the indentation issues. It should be 2 spaces instead of a tab
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Corrected Indentation for all